大多数的商城类小程序都有这个功能，点击“全部订单”，“待付款”，“待发货”，“待收货”，“已完成”，会跳转页面且跳至与之相对应的选项卡中。所以我们在开发该小程序时也做了相同的功能。如下图：

 
scroll-view与跳转.gif

但是我们在最后做交互的时候，并没有使用该效果，下篇再说这个！先说说这个效果是如何实现的！

选项卡静态布局思路： 主要用到 scroll-view与 swiper标签，选项卡切换主要依靠 swiper 中的 current 属性，不懂请自行查看小程序API。
跳转页面且跳至与之相对应的选项卡思路：
首先在 app.js 中配置 globalData。
在“个人中心” js 文件中配置点击该项跳转至与之对应的 tab 的 index。
在“个人中心”跳转页面时通过 globalData 传递 index 给“全部订单”页面，“全部订单”页面通过 app.globalData.currentLocation 接受数据，改变选项卡的切换。

app.js 代码

  1.   globalData: {
  2.     userInfo: null
  3.   }

个人中心 wxml 代码

  1. <!--九宫格  -->
  2. <view class="page">
  3.   <view class="page__bd">
  4.     <view class="weui-grids">
  5.       <view class="allrec" bindtap="allForm">
  6.           <text>我的订单</text>
  7.           <view class="more">查看更多订单</view>
  8.           <image class='moreImg' src='../../img/more.png'></image>
  9.       </view>
  10.       <!--待付款  -->
  11.       <view class="weui-grid" hover-class="weui-grid_active" bindtap="noPay">
  12.         <image class="weui-grid__icon" src="../../img/wallet.png" />
  13.         <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
  14.         <view class="weui-grid__label label">待付款</view>
  15.       </view>
  17.       <!--待发货  -->
  18.       <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend">
  19.         <image class="weui-grid__icon" src="../../img/wallet-1.png" />
  20.         <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
  21.         <view class="weui-grid__label label">待发货</view>
  22.       </view>
  24.       <!--已发货  -->
  25.       <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended">
  26.         <image class="weui-grid__icon" src="../../img/wallet-2.png" />
  27.         <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
  28.         <view class="weui-grid__label label">待收货</view>
  29.       </view>
  31.       <!--已完成  -->
  32.       <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed">
  33.         <image class="weui-grid__icon" src="../../img/wallet-3.png" />
  34.         <view class="weui-grid__label label">已完成</view>
  35.       </view>
  36.     </view>
  37.   </view>
  38. </view>

个人中心 js 代码

  1. var app = getApp()
  2. var util = require('../../utils/util.js')
  3. var formatLocation = util.formatLocation
  5. Page({
  6.   data: {
  7.   },
  8.   // 指定 全部订单 和 九宫格中按钮 点击跳转至 选项卡中 与之对应的tab
  9.   allForm:function(){
  10.     app.globalData.currentLocation = 0,
  11.     wx.navigateTo({ url: '../orderForm/orderForm' })
  12.   },
  13.   noPay:function(){
  14.     app.globalData.currentLocation = 1,
  15.     wx.navigateTo({ url: '../orderForm/orderForm' })
  16.   },
  17.   noSend:function(){
  18.     app.globalData.currentLocation = 2,
  19.     wx.navigateTo({ url: '../orderForm/orderForm' })
  20.   },
  21.   sended:function(){
  22.     app.globalData.currentLocation = 3,
  23.     wx.navigateTo({ url: '../orderForm/orderForm' })
  24.   },
  25.   completed:function(){
  26.     app.globalData.currentLocation = 4,
  27.     wx.navigateTo({ url: '../orderForm/orderForm' })
  28.   }
  29. })

个人中心 wxss 代码 (样式可能会不全，需要引入weui.wxss文件)

  1. /*九宫格  */
  2. .weui-grids{
  3.   border-left: none;
  4. }
  5. .weui-grid{
  6.   width: 25%;
  7.   border: none;
  8.   position: relative;
  9.   padding:20px 10px 10px;
  10. }
  11. .weui-grid .weui-badge{
  12. width: 12rpx;
  13. height: 28rpx;
  14. border-radius: 50%;
  15.   position: absolute;
  16.   right: 40rpx;
  17.   top: 20rpx;
  18.   background: #df0202;
  19. }
  21. /* list  */
  22. .weui-cell__hd{
  23.   margin-right: 30rpx;
  24.   vertical-align: middle;
  25.   width:20px;
  26.   height: 20px;
  27. }
  28. .weui-cell__hd image{
  29.   width: 50rpx;
  30.   height: 50rpx;
  31. }
  32. .weui-cell__ft{
  33.   color: #fff;
  34.   background: #dd3838;
  35.   border-radius: 20rpx;
  36.   text-align: center;
  37.   margin-right: 10rpx;
  38.   padding: 0 5rpx;
  39. }
  40. .all{
  41.     font-size: 30rpx;
  42. }

全部订单 wxml 代码

  1. <!--全部订单页  -->
  2.   <!--选项卡标题  -->
  4. <scroll-view scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">
  5.   <view class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="swichNav" hover-class="eee">全部</view>
  6.   <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="swichNav" hover-class="eee">待付款</view>
  7.   <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" data-current="2" bindtap="swichNav" hover-class="eee">待发货</view>
  8.   <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" data-current="3" bindtap="swichNav" hover-class="eee">已发货</view>
  9.   <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" data-current="4" bindtap="swichNav" hover-class="eee">已完成</view>
  10. </scroll-view>
  12. <!-- 选项卡内容 -->
  13. <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height:{{clientHeight?clientHeight+'px':'auto'}}">
  14.     <!-- 全部订单 内容 -->
  15.   <swiper-item>
  16.     <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  17.       <view class="kong"></view>
  18.       <!--写入显示内容  -->
  19.       <view class="list" wx:for="{{carts}}" wx:key="*this">
  20.         <!-- 图片 -->
  21.         <view class="pic">
  22.           <image src="{{item.imgurl}}"></image>
  23.         </view>
  24.         <!-- 类型表述 -->
  25.         <view class="con">
  26.           <text class="type1">{{item.type1}}</text>
  27.           <text class="type2">{{item.type2}}</text>
  28.         </view>
  29.         <!-- 价格 -->
  30.         <view class="price">
  31.           <text class="price1">￥{{item.price}}</text>
  32.           <text class="number">×{{item.num}}</text>
  33.         </view>
  34.       </view>
  35.     </scroll-view>
  36.   </swiper-item>
  37.     <!-- 待付款 内容 -->
  38.   <swiper-item>
  39.     <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  40.       <view class="kong"></view>
  41.       <!--写入显示内容  -->
  42.       <view class="list" wx:for="{{carts}}" wx:key="*this">
  43.         <!-- 图片 -->
  44.         <view class="pic">
  45.           <image src="{{item.imgurl}}"></image>
  46.         </view>
  47.         <!-- 类型表述 -->
  48.         <view class="con">
  49.           <text class="type1">{{item.type1}}</text>
  50.           <text class="type2">{{item.type2}}</text>
  51.         </view>
  52.         <!-- 价格 -->
  53.         <view class="price">
  54.           <text class="price1">￥{{item.price}}</text>
  55.           <text class="number">×{{item.num}}</text>
  56.         </view>
  57.       </view>
  58.     </scroll-view>
  59.   </swiper-item>
  60.     <!-- 待发货 内容 -->
  61.   <swiper-item>
  62.     <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  63.       <view class="kong"></view>
  64.       <!--写入显示内容  -->
  66.       <view class="list" wx:for="{{carts}}" wx:key="*this">
  67.         <!-- 图片 -->
  68.         <view class="pic">
  69.           <image src="{{item.imgurl}}"></image>
  70.         </view>
  71.         <!-- 类型表述 -->
  72.         <view class="con">
  73.           <text class="type1">{{item.type1}}</text>
  74.           <text class="type2">{{item.type2}}</text>
  75.         </view>
  76.         <!-- 价格 -->
  77.         <view class="price">
  78.           <text class="price1">￥{{item.price}}</text>
  79.           <text class="number">×{{item.num}}</text>
  80.         </view>
  81.       </view>
  82.     </scroll-view>
  83.   </swiper-item>
  84.     <!-- 已发货 内容 -->
  85.   <swiper-item>
  86.     <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  87.       <view class="kong"></view>
  88.       <!--写入显示内容  -->
  89.       <view class="list" wx:for="{{carts}}" wx:key="*this">
  90.         <!-- 图片 -->
  91.         <view class="pic">
  92.           <image src="{{item.imgurl}}"></image>
  93.         </view>
  94.         <!-- 类型表述 -->
  95.         <view class="con">
  96.           <text class="type1">{{item.type1}}</text>
  97.           <text class="type2">{{item.type2}}</text>
  98.         </view>
  99.         <!-- 价格 -->
  100.         <view class="price">
  101.           <text class="price1">￥{{item.price}}</text>
  102.           <text class="number">×{{item.num}}</text>
  103.         </view>
  104.       </view>
  105.     </scroll-view>
  106.   </swiper-item>
  107.     <!-- 已完成 内容 -->
  108.   <swiper-item>
  109.     <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  110.       <view class="kong"></view>
  111.       <!--写入显示内容  -->
  112.       <view class="list" wx:for="{{carts}}" wx:key="*this">
  113.         <!-- 图片 -->
  114.         <view class="pic">
  115.           <image src="{{item.imgurl}}"></image>
  116.         </view>
  117.         <!-- 类型表述 -->
  118.         <view class="con">
  119.           <text class="type1">{{item.type1}}</text>
  120.           <text class="type2">{{item.type2}}</text>
  121.         </view>
  122.         <!-- 价格 -->
  123.         <view class="price">
  124.           <text class="price1">￥{{item.price}}</text>
  125.           <text class="number">×{{item.num}}</text>
  126.         </view>
  127.       </view>
  128.     </scroll-view>
  129.   </swiper-item>
  130. </swiper>

全部订单 js 代码

  1. // 全部订单页
  3. //获取应用实例
  4. var app = getApp()
  5. Page({
  6.   /*** 页面的初始数据 */
  7.   data: {
  8.     // 选项卡
  9.     winWidth: 0,
  10.     winHeight: 0,
  11.     // tab切换
  12.     currentTab: 0,
  13.     // 商品内容数据
  14.     carts: [
  15.       { imgurl: '../../img/fen-2.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
  16.       { imgurl: '../../img/fen-1.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
  17.       { imgurl: '../../img/fen-2.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
  18.       { imgurl: '../../img/fen-1.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
  19.     ],
  20.   },
  21.   /** * 滑动切换tab  */
  22.   bindChange: function (e) {
  23.     var that = this;
  24.     that.setData({ currentTab: e.detail.current });
  25.   },
  26.   /** * 点击tab切换  */
  27.   swichNav: function (e) {
  28.     var that = this;
  29.     if (this.data.currentTab === e.target.dataset.current) {
  30.       return false;
  31.     } else {
  32.       that.setData({
  33.         currentTab: e.target.dataset.current
  34.       })
  35.     }
  36.   },
  37.   /*** 生命周期函数--监听页面加载*/
  38.   onLoad: function (options) {
  39.     var that = this;
  40.     /** * 获取系统信息  */
  41.     wx.getSystemInfo({
  42.       success: function (res) {
  43.         that.setData({
  44.           clientHeight: res.windowHeight
  45.         });
  46.       }
  47.     });
  48.   },
  49.   /*** 生命周期函数--监听页面显示*/
  50.   onShow: function () {
  51.     if (app.globalData.currentLocation == '') {
  52.       this.setData({
  53.         currentTab: 0
  54.       });
  55.     } else {
  56.       var i = app.globalData.currentLocation;
  57.       this.setData({
  58.         currentTab: i
  59.       });
  60.     }
  61.   }
  62. })

全部订单 wxss 代码

  1. .scroll-view_H{
  2.   white-space: nowrap;
  3. }
  4. .scroll-view-item_H{
  5.   display: inline-block;
  6.   width: 20%;
  7.   box-sizing: border-box;
  8. }
  9. .list-liu{
  10.   width: 100%;
  11.   height: 85rpx;
  12.   position: fixed;
  13.   left: 0;
  14.   top: 0;
  15.   z-index: 1;
  16.   background: #fff;
  17.   border: 1rpx solid #eee;
  18. }
  19. .on{
  20.   color: #c80611;
  21. }
  22. .list-liu .swiper-tab-list{
  23.   text-align: center;
  24.   line-height: 85rpx;
  25.   font-size: 34rpx;
  26. }
  27. .kong{
  28.   width: 100%;
  29.   height: 85rpx;
  30. }
  31. /*----------------------分割线-------------------  */
  32. /*购物车 全部订单 我的收藏 浏览记录 样式  */
  33. /* 列表 */
  34. .list{width: 100%;background: #fff;margin-top:20rpx;display: flex;box-sizing: border-box;padding:10rpx 30rpx 10rpx 30rpx ;border-bottom: 1px solid #eee}
  35. .carts-radio{flex: 1;line-height: 180rpx;text-align: center}/* 选项框 */
  36. .pic{flex: 3;height: 180rpx;}
  37. .pic image{width: 100%;height: 100%;}
  38. .con{flex: 6;padding-left: 20rpx;padding-bottom: 20rpx;box-sizing: border-box}
  39. view,text,block{
  40.     font-family: "Microsoft Yahei"
  41. }
  42. /* 类型描述 */
  43. .type1{
  44.   padding-top: 10rpx;
  45.   display: block;
  46.   font-size: 30rpx;
  47.   color: #323232;
  48.   width:100%;
  49.   overflow: hidden;
  50.   text-overflow: ellipsis;
  51.   display: -webkit-box;
  52.   -webkit-line-clamp:2;
  53.   -webkit-box-orient: vertical;
  54. }
  55.  .type2{
  56.    display: flex;
  57.   font-size: 28rpx;
  58.   color: #666;
  59.   width:100%;
  60.   padding-top: 20rpx;box-sizing: border-box
  61. }
  63. /* 数量 */
  64. .num{
  65.   width: 140rpx;
  66.   height: 40rpx;
  67.   border: 1px solid #eee;
  68.   margin-top: 15rpx;
  69.   background: #fff
  70. }
  71. .num2{
  72.   float: left;
  73.   width: 56rpx;
  74.   line-height: 40rpx;
  75.   text-align: center;
  76.  font-size: 28rpx;
  77.  color: #666666
  78. }
  79. .num1{float: left;
  80. width: 40rpx;
  81. height: 40rpx;
  82. line-height: 40rpx;
  83. text-align: center;
  84. font-size: 36rpx;
  85. padding: 0;
  86. color: #4a4949;
  87. border-right: 1px solid #eee;
  88. }
  89. .num3{
  90. float: right;
  91. width: 40rpx;
  92. height: 40rpx;
  93. line-height: 40rpx;
  94. text-align: center;
  95. font-size: 36rpx;
  96. padding: 0;
  97. margin: 0;
  98. border-radius: 0px;
  99. color: #4a4949;
  100. border-left: 1px solid #eee;
  101. } 
  103. /* 价格 */
  104. .price{flex: 3;font-size: 30rpx;color: #c90211;box-sizing: border-box;position: relative}
  105.  .price1{position: absolute;right: 0;top: 0}
  106.  .number{position: absolute;right: 0;top: 40rpx}
  108. /* 删除 */
  109. .del{width: 50rpx;height: 50rpx;position: absolute;right: 0;bottom: 20rpx}
  111. /*----------------------分割线-------------------  */
  112. /**app.wxss**/
  113. .container {
  114.   height: 100%;
  115.   display: flex;
  116.   flex-direction: column;
  117.   align-items: center;
  118.   justify-content: space-between;
  119.   padding: 200rpx 0;
  120.   box-sizing: border-box;
  121. }
  122. /*----------------------分割线-------------------  */
  123. /*首页商品类样式  */
  124. .content{
  125.   display: flex;
  126.   flex-wrap:  wrap;
  127. }
  128. .content-1{
  129.   width: 375rpx;
  130.   /* height: 420rpx; */
  131.   padding:20rpx 10rpx ;
  132.   box-sizing: border-box;
  133.   border-bottom: 2rpx solid #cccccc;
  134.   border-right: 1rpx solid #cccccc;
  135. }
  136. .content-1 image{
  137.   width: 374rpx;
  138.   height: 252rpx;
  139.   margin-left: -8rpx;
  140. }
  141. .content-1 .price .text-price{
  142.   color: #b20000;
  143.   font-size: 32rpx;
  144.   font-weight: bold;
  145. }
  146. .content-1 .price .text-yj{
  147.   color: #656565;
  148.   font-size: 24rpx;
  149. }
  150. .content-1 .price .text-oldprice{
  151.   text-decoration: line-through;
  152.   color: #656565;
  153.   font-size: 24rpx;
  154. }
  155. .content-1 .name .text-name{
  156.   font-size: 28rpx;
  157.   color: #323232;
  158. }
  159. .content-1 .dress{
  160.   margin-top: 10rpx;
  161. }
  162. .content-1 .dress .dress-1{
  163.   float: left;
  164.   color: #989898;
  165.   font-size: 24rpx;
  166. }
  167. .content-1 .dress .dress-2{
  168.   float: right;
  169.   color: #989898;
  170.   font-size: 24rpx;
  171.   margin-right: 20rpx;
  172. }

下篇为大家说明 为何最后做交互的时候，并没有使用该效果。

NO--15 微信小程序，scroll-view选项卡和跳转的更多相关文章

  1. NO--19 微信小程序之scroll-view选项卡与跳转（二）

    本篇为大家介绍为何我们在最后做交互的时候,并没有使用上一篇讲的选项卡的效果.   scroll-view与跳转.gif (如无法查看图片,还请翻看上一篇!) 大家注意看,在我点击跳转后,首先能看到的是 ...

  2. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  3. 微信小程序实现tabs选项卡

    选项卡在我们的日常开发中,使用的还是蛮多的,但是微信小程序中却没有直接提供选项卡组件,不过我们可以变通通过 scroll-view 和 swiper 组件来实现一个选项卡的功能. 需求: 实现一个选项 ...

  4. 微信小程序开发之选项卡

    选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...

  5. 微信小程序-滚动Tab选项卡

    前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...

  6. 微信小程序滚动Tab选项卡：左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

  7. 微信小程序 scroll-view 实现锚点跳转

    在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...

  8. 微信小程序开发--页面之间的跳转

    一.navigator--完成页面之间的跳转 1.新建一个页面文件夹 2.在app.json文件中引入页面 "pages": [ "pages/index/index&q ...

  9. 运用wxs制作微信小程序左滑功能和跳转，性能更优越

    锲子 微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅.如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20 ...

随机推荐

  1. Jmeter入门3 http请求—content-type与参数

    本文讲三种content-type以及在Jmeter中对应的参数输入方式 第一部分:目前工作中涉及到的content-type 有三种: content-type:在Request Headers里, ...

  2. linux下统计目录下所有子目录的大小

    du -sh * --exclude=tar |awk '{v=substr($1,length($1),1)}v=="G"{$0="1G "$0}v==&qu ...

  3. 安装ubuntu server时可能会需要的配置

    1.修改源 笔者比较习惯用163的源,配置如下: sudo vi /etc/apt/sources.list 163源为: deb http://mirrors.163.com/ubuntu/ pre ...

  4. 基于easyui开发Web版Activiti流程定制器详解（六）——Draw2d的扩展（三）

    题外话: 最近在忙公司的云项目空闲时间不是很多,所以很久没来更新,今天补上一篇! 回顾: 前几篇介绍了一下设计器的界面和Draw2d基础知识,这篇讲解一下本设计器如何扩展Draw2d. 进入主题: 先 ...

  5. HDU 5550 - Game Rooms（DP + 前缀和预处理）

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=5550 题意: 一个大楼有n(2≤n≤4000)层,每层可以建一个乒乓球房或者一个游泳房,且每种房间在大楼 ...

  6. kubernetes API Server 权限管理实践

    API Server权限控制方式介绍 API Server权限控制分为三种:Authentication(身份认证).Authorization(授权).AdmissionControl(准入控制). ...

  7. Sequelize-nodejs-8-Transactions

    Transactions事务 Sequelize supports two ways of using transactions: Sequelize支持两种使用transactions的方法 One ...

  8. SVN提交的动作解释

    今天更新svn,发现有很多动作,其中字母代表的意思半知半解,就随手记录下来: A:add,新增 C:conflict,冲突 D:delete,删除 M:modify,本地已经修改 G:modify a ...

  9. ASP.NET Core下载大文件的实现

    当我们的ASP.NET Core网站需要支持下载大文件时,如果不做控制可能会导致用户在访问下载页面时发生无响应,使得浏览器崩溃.可以参考如下代码来避免这个问题. 关于此代码的几点说明: 将数据分成较小 ...

  10. cgroup测试存储设备IOPS分配

    1 使用:创建树并且attach子系统 首先要创建文件系统的挂载点作为树的根 mkdir /cgroup/name mkdir /cgroup/cpu_and_mem Mount这个挂载点到一个或者多 ...