微信 小程序布局 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

 

0

1

1

2

 

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

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;

}

 

转载于:https://www.cnblogs.com/dianzan/p/7918976.html