本文實例為大家分享了小程序?qū)崿F(xiàn)tab和swiper切換效果展示的具體代碼，供大家參考，具體內(nèi)容如下
創(chuàng)新互聯(lián)公司憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗，為客戶提供超值的營銷型網(wǎng)站建設(shè)服務，我們始終認為：好的營銷型網(wǎng)站就是好的業(yè)務員。我們已成功為企業(yè)單位、個人等客戶提供了網(wǎng)站建設(shè)、網(wǎng)站制作服務，以良好的商業(yè)信譽，完善的服務及深厚的技術(shù)力量處于同行領(lǐng)先地位。
先上效果圖：
實現(xiàn)代碼如下：
wxml頁面
{{item}} tab0 tab1 tab2 tab3 tab4 tab5 tab6
wxss樣式：
重慶分公司
重慶分公司
page {
height: 100%;
}
view , scroll-view{
padding: 0px;
margin: 0px;
}
.weui-navbar{
width: 100%;
position: fixed;
border-bottom: 1px solid #00bba1;
box-sizing: border-box;
white-space: nowrap;
z-index: 100;
background: white;
}
.rec{
width: 100%;
height: 7%;
}
.weui-navbar .default-item{
/*width:25%;*/
display: inline-block;
text-align: center;
font-size: 32rpx;
box-sizing: border-box;
height: 7%;
padding-bottom: 20rpx;
}
.weui-navbar .item_on{
color: #00bba1;
}
.weui-navbar-slider{
position: absolute;
width: 160rpx;
height: 2px;
content:"";
background: #00bba1;
bottom: 0px;
left: 12.5rpx;
transition: transform .3s;
}
.swiper-box{
height: 900px;
border-bottom: 1px solid #d1d1d1;
}
.swiper-box .swiper-item{
text-align: center;
padding-top: 200rpx;
height: 100%;
}
js代碼：
//index.js
//獲取應用實例
var app = getApp();
var mtabW;
Page({
data: {
tabs:["綜合與繪畫","藝術(shù)噴漆","泥塑","紙面繪畫","布面繪畫","中國油畫","水墨畫"],
activeIndex:0,
slideOffset:0,
tabW:0
},
//事件處理函數(shù)
onLoad: function () {
var that = this;
wx.getSystemInfo({
success: function (res) {
mtabW = res.windowWidth / 4; //設(shè)置tab的寬度
that.setData({
tabW:mtabW
})
}
});
},
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
tabClick:function(e){
var that = this;
var idIndex = e.currentTarget.id;
var offsetW = e.currentTarget.offsetLeft; //2種方法獲取距離文檔左邊有多少距離
this.setData({
activeIndex:idIndex,
slideOffset:offsetW
});
},
bindChange:function(e){
var current = e.detail.current;
if((current+1)%4 == 0){
}
var offsetW = current * mtabW; //2種方法獲取距離文檔左邊有多少距離
this.setData({
activeIndex:current,
slideOffset:offsetW
});
}
})
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
