大多數的商城類小程序都有這個功能，點擊“全部訂單”，“待付款”，“待發貨”，“待收貨”，“已完成”，會跳轉頁面且跳至與之相對應的選項卡中。所以我們在開發該小程序時也做了相同的功能。如下圖：

scroll-view與跳轉.gif

但是我們在最后做交互的時候，并沒有使用該效果，下篇再說這個！先說說這個效果是如何實現的！

選項卡靜態布局思路： 主要用到 scroll-view與 swiper標簽，選項卡切換主要依靠 swiper 中的 current 屬性，不懂請自行查看小程序API。
跳轉頁面且跳至與之相對應的選項卡思路：
首先在 app.js 中配置 globalData。
在“個人中心” js 文件中配置點擊該項跳轉至與之對應的 tab 的 index。
在“個人中心”跳轉頁面時通過 globalData 傳遞 index 給“全部訂單”頁面，“全部訂單”頁面通過 app.globalData.currentLocation 接受數據，改變選項卡的切換。

app.js 代碼

globalData: {userInfo: null}

個人中心 wxml 代碼

<!--九宮格 --> <view class="page"> <view class="page__bd"> <view class="weui-grids"> <view class="allrec" bindtap="allForm"> <text>我的訂單</text> <view class="more">查看更多訂單</view> <image class='moreImg' src='../../img/more.png'></image> </view> <!--待付款 --> <view class="weui-grid" hover-class="weui-grid_active" bindtap="noPay"> <image class="weui-grid__icon" src="../../img/wallet.png" /> <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view> <view class="weui-grid__label label">待付款</view> </view> <!--待發貨 --> <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend"> <image class="weui-grid__icon" src="../../img/wallet-1.png" /> <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view> <view class="weui-grid__label label">待發貨</view> </view> <!--已發貨 --> <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended"> <image class="weui-grid__icon" src="../../img/wallet-2.png" /> <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view> <view class="weui-grid__label label">待收貨</view> </view> <!--已完成 --> <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed"> <image class="weui-grid__icon" src="../../img/wallet-3.png" /> <view class="weui-grid__label label">已完成</view> </view> </view> </view> </view>

個人中心 js 代碼

var app = getApp() var util = require('../../utils/util.js') var formatLocation = util.formatLocation Page({ data: { }, // 指定 全部訂單 和 九宮格中按鈕 點擊跳轉至 選項卡中 與之對應的tab allForm:function(){ app.globalData.currentLocation = 0, wx.navigateTo({ url: '../orderForm/orderForm' }) }, noPay:function(){ app.globalData.currentLocation = 1, wx.navigateTo({ url: '../orderForm/orderForm' }) }, noSend:function(){ app.globalData.currentLocation = 2, wx.navigateTo({ url: '../orderForm/orderForm' }) }, sended:function(){ app.globalData.currentLocation = 3, wx.navigateTo({ url: '../orderForm/orderForm' }) }, completed:function(){ app.globalData.currentLocation = 4, wx.navigateTo({ url: '../orderForm/orderForm' }) } })

個人中心 wxss 代碼 (樣式可能會不全，需要引入weui.wxss文件)

/*九宮格 */ .weui-grids{border-left: none; } .weui-grid{ width: 25%; border: none; position: relative; padding:20px 10px 10px; } .weui-grid .weui-badge{ width: 12rpx; height: 28rpx; border-radius: 50%; position: absolute; right: 40rpx; top: 20rpx; background: #df0202; } /* list */ .weui-cell__hd{ margin-right: 30rpx; vertical-align: middle; width:20px; height: 20px; } .weui-cell__hd image{ width: 50rpx; height: 50rpx; } .weui-cell__ft{ color: #fff; background: #dd3838; border-radius: 20rpx; text-align: center; margin-right: 10rpx; padding: 0 5rpx; } .all{ font-size: 30rpx; }

全部訂單 wxml 代碼

<!--全部訂單頁 --><!--選項卡標題 --><scroll-view scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu"> <view class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="swichNav" hover-class="eee">全部</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="swichNav" hover-class="eee">待付款</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" data-current="2" bindtap="swichNav" hover-class="eee">待發貨</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" data-current="3" bindtap="swichNav" hover-class="eee">已發貨</view> <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" data-current="4" bindtap="swichNav" hover-class="eee">已完成</view> </scroll-view> <!-- 選項卡內容 --> <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height:{{clientHeight?clientHeight+'px':'auto'}}"> <!-- 全部訂單 內容 --> <swiper-item> <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}"> <view class="kong"></view> <!--寫入顯示內容 --> <view class="list" wx:for="{{carts}}" wx:key="*this"> <!-- 圖片 --> <view class="pic"> <image src="{{item.imgurl}}"></image> </view> <!-- 類型表述 --> <view class="con"> <text class="type1">{{item.type1}}</text> <text class="type2">{{item.type2}}</text> </view> <!-- 價格 --> <view class="price"> <text class="price1">￥{{item.price}}</text> <text class="number">×{{item.num}}</text> </view> </view> </scroll-view> </swiper-item> <!-- 待付款 內容 --> <swiper-item> <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}"> <view class="kong"></view> <!--寫入顯示內容 --> <view class="list" wx:for="{{carts}}" wx:key="*this"> <!-- 圖片 --> <view class="pic"> <image src="{{item.imgurl}}"></image> </view> <!-- 類型表述 --> <view class="con"> <text class="type1">{{item.type1}}</text> <text class="type2">{{item.type2}}</text> </view> <!-- 價格 --> <view class="price"> <text class="price1">￥{{item.price}}</text> <text class="number">×{{item.num}}</

轉載于:https://www.cnblogs.com/cb-bin/p/9059335.html

總結

以上是生活随笔為你收集整理的NO--15 微信小程序，scroll-view选项卡和跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。