swiper 套swiper 父橫向，子橫向或者豎向
阿新 • • 發佈：2021-09-15
html
<view class="nav-top">
<view class="nav-top-div1 {{currentView==0?'active':''}}" data-typeCurrent='0' bindtap="bindtap">視訊</view>
<view class="nav-top-div2 {{currentView==1?'active':''}}" data-typeCurrent='1' bindtap="bindtap">推薦</view>
<view class="nav-top-div3 {{currentView==2?'active':''}}" data-typeCurrent='2' bindtap="bindtap">直播</view>
</view>
<swiper class="swipercont" bindchange='bindchange2' current="{{currentView}}">
<block>
<swiper-item>
<swiper class="swiper2" vertical="true" >
<block wx:for="{{background1}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}">{{item}}</view>
</swiper-item>
</block>
</swiper>
</swiper-item>
<swiper-item>
<swiper class="swiper2" bindchange='bindchange' bindtransition='bindtransition' bindanimationfinish='bindanimationfinish' current="{{page2current}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}">{{item}}</view>
</swiper-item>
</block>
</swiper>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" style="height:100%" >
<view id="demo1" class="scroll-view-item demo-text-1">2</view>
<view id="demo2" class="scroll-view-item demo-text-2">3</view>
<view id="demo3" class="scroll-view-item demo-text-3">4</view>
</scroll-view>
</swiper-item>
</block>
</swiper>
JS
Page({
/**
* 頁面的初始資料
*/
data: {
currentView:0,//預設顯示第一個第div
background1: ['視訊模組div1', '視訊模組div2', '視訊模組div3'],
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
page2current:0,//預設swiperitem
isTotouch:0,
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
},
bindchange2(e){
console.log('父親swiper')
const {current, source}=e.detail;
this.setData({
currentView:current
})
},
bindchange(e){
console.log('子swiper')
const {current, source}=e.detail;
this.setData({
page2current:current
});
},
bindanimationfinish(e){
console.log('子swiperfinish')
if(this.data.page2current==2){
if(this.data.isTotouch==4){
this.setData({
currentView:2,
})
}else{
this.setData({
isTotouch:4
})
}
}else if(this.data.page2current==0){
if(this.data.isTotouch==-1){
this.setData({
currentView:0,
})
}else{
this.setData({
isTotouch:-1
})
}
}
},
bindtap(event){
console.log(event);
const type=Number(event.currentTarget.dataset.typecurrent);
let page2current=0;
if(type==2){
page2current=2
}else if(type==0){
page2current=0
}
this.setData({
currentView:type,
page2current:page2current
})
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
})
CSS
.mian{
position: absolute;
height: 100%;
left:0;
top:0;
width: 2260rpx;
}
.mian-div1{
width: 100vw;
height: 100vh;
background-color: #00ff00;
float: left;
}
.mian-div2{
width: 100vw;
height: 100vh;
background-color: #00ff00;
float: left;
}
.mian-div3{
width: 100vw;
height: 100vh;
background-color: #00ff00;
float: left;
}
.swiper2{
width: 100%;
height: 100%;
}
.nav-top{
position: absolute;
top:20px;
display: flex;
width: 500rpx;
left:0;
z-index: 1;
}
.nav-top-div1,.nav-top-div2,.nav-top-div3{
flex:1;
font-size: 30rpx;
text-align: center;
color:#000;
}
.nav-top-div1.active{
color:#ff0000;
}
.nav-top-div2.active{
color:#ff0000;
}
.nav-top-div3.active{
color:#ff0000;
}
.swiper-item{
text-align: center;
width: 100%;
padding-top:300rpx;
font-size: 40rpx;
}
.scroll-view-item{
height: 600rpx;
}
.cont{
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.swipercont{
width: 100vw;
height: 100vh;
background-color: #f0f;
}
記下點滴，等老了慢慢欣賞