微信 小程序布局 swiper 页面

JS

// pages/classify/swiper.js

Page({

/**

* 页面的初始数据

*/

data: {

current:0

 

},

titleBtn:function(e){

var acIndex = e.currentTarget.dataset.current;

this.setData({

current: acIndex

})

},

swiperBtn:function(e){

var acIndex = e.detail.current;

this.setData({

current: acIndex

})

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

 

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

 

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

 

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

 

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

}

})

 

//-------------------------------------------------------------------------------------------------------------------------------------------------------------

WXML

 

<view class='swiper-container'>

<view class='swiper-top flexca'>

<view class='top-box flex'>

<view class="{{current==0?'active':''}}" data-current='0' bindtap='titleBtn'>0</view>

<view class="{{current==1?'active':''}}" data-current='1' bindtap='titleBtn'>1</view>

</view>

</view>

<view class='swiper-contant'>

<swiper vertical="true" style='height:100%' current="{{current}}" bindchange="swiperBtn">

<swiper-item>

<view id="green" class="scroll-view-item bc_green">1</view>

</swiper-item>

<swiper-item>

<view id="red" class="scroll-view-item bc_red">2</view>

</swiper-item>

</swiper>

</view>

</view>

 

//-------------------------------------------------------------------------------------------------------------------------------------------------------------

WXSS

page{

width: 100%;

height: 100%;

}

.swiper-container{

width: 100%;

height: 100%;

">#f7f7f7;

}

.swiper-top{

width: 100%;

height: 10%;

">#000;

}

.top-box{

width: 200rpx;

height: 80%;

 

}

.top-box view{

width: 90rpx;

height: 100%;

">#fff;

}

.top-box .active{

">gold;

}

.top-box view:first-child{

margin-right: 20rpx;

}

.swiper-contant{

width: 100%;

height: 90%;

}

.scroll-view-item{

height: 100%;

}

.bc_green{

">green;

}

.bc_red{

">red;

}