小程序 swiper css,微信小程序swiper组件

微信小程序swiper(滑块视图容器)。其中只可放置swiper-item组件，不然会致使未定义的行为。css

wxml:html

tab1

tab2

view1

view2

wxss:小程序

.swiper-tab {

width: 100%;

text-align: center;

border-bottom: 1px solid #b2b2b2;

}

.swiper-tab-item {

width: 50%;

display: inline-block;

font-size: 12pt;

color: #666;

}

.on {

color: #09bb07;

border-bottom: 5rpx solid #09bb07;

}

js:微信小程序

Page({

data: {

clientHeight: 0,

currentTab: 0

},

onLoad: function (options) {

var that = this;

// 动态获取设备屏幕高度

wx.getSystemInfo({

success: function (res) {

that.setData({

clientHeight: res.windowHeight

});

}

});

},

swichTab: function (e) {

var that = this;

if (this.data.currentTab === e.target.dataset.current) {

return false;

} else {

var id = e.target.dataset.current;

that.setData({

currentTab: id

})

}

},

bindTouch: function (e) {

var that = this;

var id = e.detail.current;

that.setData({

currentTab: id

});

}

})

效果图以下：微信

疯狂滚动

咱们看到目前是可用的状态，可是运行了一段时间以后，它就开始疯狂滚动。xss

官方文档给出的提示函数

tip: 若是在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能致使 setData 被不停地调用，于是一般状况下请在改变 current 值前检测 source 字段来判断是不是因为用户触摸引发。this

因此修改bindTouch函数加上source字段判断code

bindTouch: function (e) {

var that = this;

var id = e.detail.current;

if (e.detail.source == 'touch') {

that.setData({

currentTab: id

});

}

}

和scroll-view结合使用

wxml:xml

tab1

tab2

view

...

view2

可是会发现它的样式有问题

滚动条已经拖到底了可是仍是现实不全。由于设置的高度多了一个头部tab栏的高度，因此这里不能设为100%，也须要动态设置。

将page overflow:hidden能够固定头部tab栏