本文實(shí)例為大家分享了小程序?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)驗(yàn),為客戶提供超值的營(yíng)銷型網(wǎng)站建設(shè)服務(wù),我們始終認(rèn)為:好的營(yíng)銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶提供了網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù),以良好的商業(yè)信譽(yù),完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。
先上效果圖:
實(shí)現(xiàn)代碼如下:
wxml頁(yè)面
<scroll-view scroll-x="true" class="weui-navbar"> <block wx:for-items="{{tabs}}"> <view id="{{index}}" class="{{activeIndex == index ?'item_on':''}} default-item" bindtap="tabClick" > {{item}} </view> </block> <view class="weui-navbar-slider" ></view> </scroll-view> <view class="rec" /> <swiper current="{{activeIndex}}" class="swiper-box" duration="100" bindchange="bindChange"> <swiper-item class="swiper-item"> <view class="slide-view">tab0</view> </swiper-item> <swiper-item class="swiper-item"> <view class="slide-view">tab1</view> </swiper-item> <swiper-item class="swiper-item"> <view class="slide-view">tab2</view> </swiper-item> <swiper-item class="swiper-item"> <view class="slide-view">tab3</view> </swiper-item> <swiper-item class="swiper-item"> <view class="slide-view">tab4</view> </swiper-item> <swiper-item class="swiper-item"> <view class="slide-view">tab5</view> </swiper-item> <swiper-item class="swiper-item"> <view class="slide-view">tab6</view> </swiper-item> </swiper>
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 //獲取應(yīng)用實(shí)例 var app = getApp(); var mtabW; Page({ data: { tabs:["綜合與繪畫","藝術(shù)噴漆","泥塑","紙面繪畫","布面繪畫","中國(guó)油畫","水墨畫"], 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 }); } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前名稱:微信小程序?qū)崿F(xiàn)tab和swiper切換結(jié)合效果
網(wǎng)站鏈接:http://bm7419.com/article20/goceco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站營(yíng)銷、品牌網(wǎng)站制作、域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)