微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡(swiper)
微信小程序頂部選項(xiàng)卡在開(kāi)發(fā)中是非常常用的,下面用一點(diǎn)時(shí)間實(shí)現(xiàn)了一下。
效果圖:
下面直接上代碼:
wxml:
<!--pages/index/index.wxml--> <view class="swiper-tab"> <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">選項(xiàng)一</view> <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">選項(xiàng)二</view> <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">選項(xiàng)三</view> </view> <swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange"> <swiper-item> <view>頁(yè)面一</view> </swiper-item> <swiper-item> <view>頁(yè)面二</view> </swiper-item> <swiper-item> <view>頁(yè)面三</view> </swiper-item> </swiper>
wxss:
/* pages/index/index.wxss */ .swiper-tab{ width: 100%; text-align: center; line-height: 80rpx; border-bottom: 1px solid #000; display: flex; flex-direction: row; justify-content: center; } .tab-item{ flex: 1; font-size: 30rpx; display: inline-block; color: #777777; } .on{ color: red; border-bottom: 5rpx solid red; } .swiper{ display: block; height: 100%; width: 100%; overflow: hidden; } .swiper view{ text-align: center; padding-top: 100rpx; }
js:
// pages/index/index.js Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { winWidth:0, winHeight:0, currentTab:0 }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { var that = this; /** * 獲取系統(tǒng)信息 */ wx.getSystemInfo({ success: function (res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight }); } }); }, bindChange: function (e) { var that = this; that.setData({ currentTab: e.detail.current }); }, swichNav: function (e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } } , /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { } })
以上是實(shí)現(xiàn)過(guò)程,總體上沒(méi)什么難度??梢詤⒖紖⒖?。
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊兩個(gè)精彩的專題:javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序開(kāi)發(fā)之實(shí)現(xiàn)選項(xiàng)卡(窗口頂部TabBar)頁(yè)面切換
- 微信小程序?qū)崿F(xiàn)選項(xiàng)卡功能
- 微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果
- 微信小程序 選項(xiàng)卡的簡(jiǎn)單實(shí)例
- 微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換
- 微信小程序 tabs選項(xiàng)卡效果的實(shí)現(xiàn)
- 微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄(選項(xiàng)卡)(1)
- 微信小程序自定義組件實(shí)現(xiàn)tabs選項(xiàng)卡功能
- 微信小程序?qū)崿F(xiàn)選項(xiàng)卡的簡(jiǎn)單實(shí)例
- 微信小程序?qū)崿F(xiàn)選項(xiàng)卡的方法
相關(guān)文章
基于substring()和substr()的使用以及區(qū)別(實(shí)例講解)
下面小編就為大家分享一篇基于substring()和substr()的使用以及區(qū)別實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12使用js實(shí)現(xiàn)的簡(jiǎn)單拖拽效果
本文給大家分享的是使用純JS實(shí)現(xiàn)的簡(jiǎn)單的拖拽效果的插件,算是對(duì)自己javascript學(xué)習(xí)的一個(gè)小的檢驗(yàn),如果小伙伴們需要復(fù)雜的拖拽效果,還是考慮jQuery的draggable吧,更成熟一些。2015-03-03JavaScript開(kāi)發(fā)Chrome瀏覽器擴(kuò)展程序UI的教程
Chrome擴(kuò)展開(kāi)發(fā)API中提供了一些關(guān)于UI外觀的操作,如果是剛剛上手的話首先需要了解Browser Actions、Omnibox、選項(xiàng)頁(yè)等,在這篇JavaScript開(kāi)發(fā)Chrome瀏覽器擴(kuò)展程序UI的教程中,我們先來(lái)回顧一下基本知識(shí):2016-05-05js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制...2007-06-06