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