很好用的實例就轉載了: 原文鏈接:http://blog.csdn.net/qq_26420489/article/details/62044526
之前Android開發時,頂部導航用到viewPage,微信小程序裏想要達到同樣的效果,可用swiper來實現;先看效果圖
上代碼:
1.swiperTab.js
- Page({
- data: {
- // tab切換
- currentTab: 0,
- },
- swichNav: function (e) {
- console.log(e);
- var that = this;
- if (this.data.currentTab === e.target.dataset.current) {
- return false;
- } else {
- that.setData({
- currentTab: e.target.dataset.current,
- })
- }
- },
- swiperChange: function (e) {
- console.log(e);
- this.setData({
- currentTab: e.detail.current,
- })
- },
- onLoad: function (options) {
- // 生命週期函數--監聽頁面加載
- },
- onReady: function () {
- // 生命週期函數--監聽頁面初次渲染完成
- },
- onShow: function () {
- // 生命週期函數--監聽頁面顯示
- },
- onHide: function () {
- // 生命週期函數--監聽頁面隱藏
- },
- onUnload: function () {
- // 生命週期函數--監聽頁面卸載
- },
- onPullDownRefresh: function () {
- // 頁面相關事件處理函數--監聽用戶下拉動作
- },
- onReachBottom: function () {
- // 頁面上拉觸底事件的處理函數
- },
- onShareAppMessage: function () {
- // 用戶點擊右上角分享
- return {
- title: 'title', // 分享標題
- desc: 'desc', // 分享描述
- path: 'path' // 分享路徑
- }
- }
- })
2.swiperTab.wxml
- <view class="page">
- <!--頂部導航欄-->
- <view class="swiper-tab">
- <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Tab1</view>
- <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Tab2</view>
- <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Tab3</view>
- </view>
- <!--內容主體-->
- <swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
- <swiper-item>
- <view>我是tab1</view>
- </swiper-item>
- <swiper-item>
- <view>我是tab2</view>
- </swiper-item>
- <swiper-item>
- <view>我是tab3</view>
- </swiper-item>
- </swiper>
- </view>
3.swiperTab.wxss
- .page {
- margin-left: 10rpx;
- margin-right: 10rpx;
- }
- .swiper-tab {
- display: flex;
- flex-direction: row;
- line-height: 80rpx;
- border-bottom: 2rpx solid #777;
- }
- .tab-item {
- width: 33.3%;
- text-align: center;
- font-size: 15px;
- color: #777;
- }
- .swiper {
- height: 1100px;
- background: #dfdfdf;
- }
- .on {
- color: blue;
- border-bottom: 5rpx solid blue;
- }