Skip to content

T
taobao-mini-template
Commit 14f8514e authored by wanghuan's avatar wanghuan
Browse files
Options

add:swiper轮播

parent 3753bb8b
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 131 deletions
c_client/config/default.js
View file @ 14f8514e
export default {
hasCanvas: true, // 是否开启游戏模块自动注入dist
hasCanvas: false, // 是否开启游戏模块自动注入dist
defaultPlugins: [
[
'@pluve/taro-plugin-mars', // taro暂时未支持阿里小程序自定义插件 需要引用插件的页面需配置
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx
View file @ 14f8514e
......@@ -20,16 +20,17 @@ const SwiperView = (props) => {
isSpecial=true,
easingFunction=`${EASING_WAYS.LINEAR}`,
circular=true,
autoplay=false,
autoplay=true,
vertical=false,
duration=1000,
interval=1500,
disableTouch=false,
swiperGroup={width:300,height:400},
swiperContent={width:300,height:400},
swiperGroup={width:300,height:300,overflow:''},
swiperContent={width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
imgContent={width:200,height:200},
textContent={width:300,height:60},
showLeftRightBtn=true
textContent={width:200,height:60},
showLeftRightBtn=true,
} = props;
const [currentIndex, setCurrentIndex] = useState(0);
......@@ -38,7 +39,7 @@ const SwiperView = (props) => {
* @param {*} e
*/
const swiperChange = e => {
console.log("e", e);
// console.log("e", e);
setCurrentIndex(e.detail.current);
};
......@@ -47,8 +48,12 @@ const SwiperView = (props) => {
* @param {*} index 数组索引值
* @returns 返回类名
*/
const useCustomAni = (index) => {
return `${currentIndex > 0 && currentIndex == index && 'move_in'} ${currentIndex - 1 == index && 'move_out'}`
const useCustomAni = (i) => {
return `${((currentIndex < i && ((i !== swiperList.length - 1)||currentIndex!==0)) || ((currentIndex === swiperList.length - 1) && i == 0 ))
? 'item_right'
:
(((currentIndex > i && (i !== 0 || currentIndex !== swiperList.length - 1)) || (currentIndex !== 0 && i !== swiperList.length - 1)) ? 'item_left' : 'item_middle')
}`
}
/**
......@@ -60,9 +65,42 @@ const SwiperView = (props) => {
})
}
const motionType = {
LEFT:"LEFT",
RIGHT:"RIGHT"
}
/**
* @description
*/
const turnRound = (type) => {
const motion = {
[motionType.LEFT]:()=>{
setCurrentIndex(currentIndex==0 ? swiperList.length - 1 : (currentIndex - 1))
},
[motionType.RIGHT]:()=>{
setCurrentIndex(currentIndex == swiperList.length - 1 ? 0 : (currentIndex + 1))
}
}
motion[type]();
}
useEffect(()=>{
console.log('cur----',currentIndex);
},[currentIndex])
return (
<View className="scroll_container">
{/* <View className='left_btn' >&lt;&lt;</View> */}
<View
className="scroll_container"
style={{
width:`${650/100}rem`,
overflow:'hidden'
}}
>
{/* <View className='left_btn' onTap={()=>turnRound('LEFT')}>&lt;&lt;</View> */}
<Swiper
className="swiper_group"
current={currentIndex}
......@@ -76,7 +114,8 @@ const SwiperView = (props) => {
disableTouch={disableTouch}
style={{
width:`${swiperGroup.width/100}rem`,
height:`${swiperGroup.height/100}rem`
height:`${swiperGroup.height/100}rem`,
overflow:`${swiperGroup.overflow}`
}}
>
{swiperList.length &&
......@@ -86,7 +125,10 @@ const SwiperView = (props) => {
className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}`}
style={{
width:`${swiperContent.width/100}rem`,
height:`${swiperContent.height/100}rem`
height:`${swiperContent.height/100}rem`,
backgroundColor:`${ swiperContent.backgroundColor}`,
backgroundImage:`${ swiperContent.backgroundImage}`,
borderRadius:`${swiperContent.borderRadius/100}rem`
}}
onTap={()=>getCurrentDetail(item)}
>
......@@ -96,7 +138,9 @@ const SwiperView = (props) => {
src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
></Image>
)} */}
<View className="item_img_content">
<View
className="item_img_content"
>
{/* 单个swiper主要内容 */}
<Image
className="img"
......@@ -112,7 +156,6 @@ const SwiperView = (props) => {
style={{
width:`${textContent.width/100}rem`,
height:`${textContent.height/100}rem`,
padding:`${0/100}rem ${16/100}rem`
}}
>
<View className='text' >{item.content}</View>
......@@ -124,7 +167,7 @@ const SwiperView = (props) => {
))}
</Swiper>
{/* <View className='right_btn' >&gt;&gt;</View> */}
{/* <View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</View> */}
</View>
);
};
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.less
View file @ 14f8514e
.scroll_container{
width: 450px;
// width: 450px;
// overflow: hidden;
margin: 0 auto;
overflow: hidden;
// display: flex;
// justify-content: space-around;
// align-items: center;
.swiper_group {
margin: 0 auto;
overflow: hidden;
position: relative;
swiper-item {
width: 300px;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
.image-property(cover, center center);
}
.scroll_item {
width: 300px;
// width: 300px;
margin: 0 auto;
position: relative;
border-radius: 20px;
......@@ -40,10 +49,18 @@
.text_content{
margin: 0 auto;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
.text{
color: #232323;
text-align: center;
line-height: 30px;
font-size: 24px;
}
}
}
......@@ -56,16 +73,24 @@
}
}
// &.move_in{
// animation: movein 0.8s linear forwards;
// &.item_left{
// transform: translateX(-300px);
// transition: all 1s ease;
// }
// &.move_out{
// animation: moveout 0.8s linear ;
// &.move_right{
// transform: translateX(300px);
// transition: all 1s ease;
// }
// &.item_middle{
// transform: translateX(0px);
// transition: all 1s ease;
// }
}
}
}
@keyframes movein {
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.md
View file @ 14f8514e
......@@ -10,8 +10,8 @@
| duration | Number | 滑动动画时长| 1000 |/|
| interval | Number | 自动切换时间间隔| 1500 |/|
| easingFunction|String | 缓动动画类型| linear |'default','linear' 'easeInCubic' 'easeOutCubic' 'easeInOutCubic'|
| swiperGroup | Object | 整个swiper的宽高 |{width:300,height:400}|/|
| swiperContent | Object | 单个swiperItem的宽高 |{width:300,height:400}|/|
| swiperGroup | Object | 整个swiper的宽高 |{width:300,height:300,overflow:''}|/|
| swiperContent | Object | 单个swiperItem的宽高 |{width:250,height:300,backgroundColor:'#fff',borderRadius:25,backgroundImage:''}|/|
| imgContent | Object | 图片宽高 |{width:200,height:200}|/|
| textContent | Object | 文本宽高 |{width:300,height:60}|/|
......@@ -31,21 +31,19 @@
```jsx
import SwiperView from '@/components/_tb_comps/SwiperView/SwiperView'
const swiperConfig = { //不传走默认配置
swiperList:[],
isSpecial:true,
easingFunction:`linear`,
circular:true,
autoplay:false,
vertical:false,
duration:1000,
interval:1500,
disableTouch:false,
swiperGroup:{width:300,height:400},
swiperContent:{width:300,height:400},
imgContent:{width:200,height:200},
textContent:{width:300,height:60}
}
const swiper_config = {//不传走默认配置
easingFunction:`linear`,
circular:true,
autoplay:false,
vertical:false,
duration:1000,
interval:1500,
disableTouch:false,
swiperGroup:{width:300,height:300,overflow:''},
swiperContent:{width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
imgContent:{width:200,height:200},
textContent:{width:240,height:60}
}
export const Index = () => {
return(
......
c_client/src/hooks/useAudio.js
View file @ 14f8514e
......@@ -42,7 +42,7 @@
*/
const playAudio = (callbackFn=()=>{}) => {
console.log('musicUrl',musicUrl,'selfStatus',openStatus)
musicUrl && playBgMusic1(openStatus, musicUrl, callbackFn);
musicUrl && playBgMusic1(openStatus, musicUrl, callbackFn,isBgMusic);
};
return {
playAudio,
......
c_client/src/hooks/useAudio.md
View file @ 14f8514e
......@@ -86,4 +86,25 @@ export const Other = () => {
let musics = my.getStorageSync({ key: 'musicStatus' }).data;
console.log('musicStatus----改变值----->>>>>>>>>>',musics);
}
```
+ 背景音效后台关闭
```jsx
const {openStatus,setOpenStatus} = useAudio(CLOUD_OBJ['2'],true)
useDidHide(()=>{
// 停止背景音乐
openStatus && setOpenStatus(false)
})
useDidShow(()=>{
// 播放背景音乐(缓存处理)
let musicStatus = my.getStorageSync({ key: 'musicStatus' }).data;
if(musicStatus){
setOpenStatus(true)
}
// 非缓存 默认开启
setOpenStatus(true)
})
```
\ No newline at end of file
c_client/src/pages/index/index.jsx
View file @ 14f8514e
......@@ -25,6 +25,8 @@ import SwiperView from '@/components/_tb_comps/SwiperView/SwiperView'
import RotateWheel from '@/components/_tb_comps/RotateWheel/RotateWheel'
import {prizeList} from '@/const'
const INDEX_CONFIG = {
bg: '', // 背景 cloud://C4015B7CEC23CF013A78247E2852524F//火箭待机小球抖动.json
ruleButton: '', // 规则按钮
......@@ -67,15 +69,15 @@ const SCROLLXVIEW_CONFIG = {
const swiper_config = {
easingFunction:`linear`,
circular:true,
autoplay:true,
autoplay:false,
vertical:false,
duration:1000,
interval:1500,
disableTouch:false,
swiperGroup:{width:300,height:400},
swiperContent:{width:300,height:400},
swiperGroup:{width:300,height:300,overflow:''},
swiperContent:{width:250,height:300,backgroundColor:'#fff',backgroundImage:'',borderRadius:25},
imgContent:{width:200,height:200},
textContent:{width:300,height:60}
textContent:{width:240,height:60}
}
function Index() {
......@@ -96,13 +98,13 @@ function Index() {
const showHelp = useRef(false)
/* 背景音乐 */
const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(CLOUD_OBJ['1'])
const {playAudio,musicUrl,setOpenStatus,openStatus} = useAudio(BGMUSIC_URL.MUSIC,true)
const playCurrentAudio = () => {
// setOpenStatus(!openStatus)
playAudio(()=>{
onHandleIndex('prize')
})
setOpenStatus(!openStatus)
// playAudio(()=>{
// onHandleIndex('prize')
// })
}
const fetchActivityInfo = async() => {
......@@ -126,10 +128,10 @@ function Index() {
// })
},[])
// 授权登录完成
useLogin(async (info) => {
handleVisibleModal(info)
// setUpdateFlag(1)
})
// useLogin(async (info) => {
// handleVisibleModal(info)
// // setUpdateFlag(1)
// })
// 查看是否有助力信息
const getShareInfo = async () => {
const { success, data } = await API.getShareInfo()
......@@ -211,13 +213,14 @@ function Index() {
{/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */}
{/* swiper左右滑动 */}
{/* <SwiperView {...swiper_config} swiperList={prizeList} /> */}
<View className='view' onTap={playCurrentAudio}>play audio</View>
{/* <SwiperView swiperList={prizeList} /> */}
{/* 大转盘 */}
<RotateWheel {...rotateConfig} callback={()=>{}} />
{/* <RotateWheel {...rotateConfig} callback={()=>{}} /> */}
<View className='view' onTap={playCurrentAudio}>play audio</View>
{
tasksModalVisible &&
......
c_client/src/utils/audio.js
View file @ 14f8514e
......@@ -45,84 +45,77 @@ export const getSystemInfo = () => {
});
};
let bgs = {};
export const playBgMusic1 = async (
isOn,
src,
callbackFn = () => {},
loop = false
) => {
//待测试
let bgs = {
}
export const playBgMusic1 = async (isOn, src, callbackFn=()=>{}, loop=false) => {//待测试
for (let k in bgs) {
if (bgs[k].isOn) {
bgs[k].stop();
}
// bgs[k].isOn = false; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
}
for (let k in bgs) {
if (bgs[k].isOn) {
bgs[k].stop();
}
// bgs[k].isOn = false; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
}
const key = src;
console.log("---------->>>>>>>>>>>>>ison", isOn);
if (isOn) {
if (!bgs[key]) {
console.log("enter inner before the createAudio function", src, loop);
bgs[key] = createAudio({
src: src,
autoplay: true,
loop: loop /// TODO 暂时无效？2020.08.12 目前有效，但stop后还会跑数据，导致到音频结束到时间又自动播放
});
const key = src;
console.log('---------->>>>>>>>>>>>>ison',isOn);
if (isOn) {
if (!bgs[key]) {
console.log('enter inner before the createAudio function',src,loop);
bgs[key] = createAudio({
src: src,
autoplay: true,
loop: loop /// TODO 暂时无效？2020.08.12 目前有效，但stop后还会跑数据，导致到音频结束到时间又自动播放
});
console.log("----------------src", src, bgs[key], "bgs[key]");
console.log('----------------src',src,bgs[key],'bgs[key]')
bgs[key].onPlay(() => {
bgs[key].isOn = true;
});
bgs[key].onPlay(() => {
bgs[key].isOn = true;
});
bgs[key].onStop(() => {
bgs[key].isOn = false;
});
bgs[key].onStop(() => {
bgs[key].isOn = false;
});
const systemInfo = await getSystemInfo();
const systemInfo = await getSystemInfo();
console.log(systemInfo, "systemInfo-------systemInfo");
console.log(systemInfo,'systemInfo-------systemInfo')
/// TODO监听结束，因为loop无效 2020.08.12 loop有效，这个操作是为了解决stop之后还会跑音频数据的问题
bgs[key].onEnded(() => {
if (bgs[key].isOn) {
// 判断自己记录的开关
if (systemInfo?.platform.includes("Android")) {
// 安卓
bgs[key].play();
} else if (
systemInfo?.platform.includes("iOS") ||
systemInfo?.platform.includes("iPhone OS ")
) {
// ios
bgs[key].isOn = false;
}
delete bgs[key];
callbackFn && callbackFn();
}
});
bgs[key].play(); // 安卓有时候autoplay好像莫得用
// console.log(src)
// bgs[key].isOn = true; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
} else {
console.log("---------->>>>>>>>>>>>>not enter ");
/// TODO监听结束，因为loop无效 2020.08.12 loop有效，这个操作是为了解决stop之后还会跑音频数据的问题
bgs[key].onEnded(() => {
if (bgs[key].isOn) {
// 判断自己记录的开关
if(systemInfo?.platform.includes('Android')){
// 安卓
bgs[key].play();
} else if(systemInfo?.platform.includes('iOS') || systemInfo?.platform.includes('iPhone OS ')){
// ios
bgs[key].isOn = false;
}
delete bgs[key];
callbackFn && callbackFn();
}
});
bgs[key].play(); // 安卓有时候autoplay好像莫得用
// console.log(src)
// bgs[key].isOn = true; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
bgs[key].play();
// bgs[key].isOn = true; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
callbackFn && callbackFn();
}
} else {
if (bgs[key]) {
// bgs[key].pause(); /// pause 垃圾，不能用
console.log("test stop function is work or not");
bgs[key].stop();
// bgs[key].isOn = false; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
callbackFn && callbackFn();
} else {
callbackFn && callbackFn();
}
}
};
} else {
console.log('---------->>>>>>>>>>>>>not enter ');
bgs[key].play();
// bgs[key].isOn = true; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
callbackFn && callbackFn();
}
} else {
if (bgs[key]) {
// bgs[key].pause(); /// pause 垃圾，不能用
console.log('test stop function is work or not')
bgs[key].stop();
// bgs[key].isOn = false; /// TODO 自己记一个开关，因为淘宝的玩意stop之后虽然听不到，但还是在播放，会触发loop播放和onEnded事件
callbackFn && callbackFn();
} else {
callbackFn && callbackFn();
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment