微信 小程序布局 swiper 页面
Posted ThisCall
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信 小程序布局 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;
}
以上是关于微信 小程序布局 swiper 页面的主要内容，如果未能解决你的问题，请参考以下文章