微信小程序之scroll-view选项卡与跳转 (一) - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序之scroll-view选项卡与跳转 (一)

发表时间:2021-4-12

发布人:葵宇科技

浏览次数:79

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

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

选项卡静态布局思路: 主要用到 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>
  16. <!--待发货 -->
  17. <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend">
  18. <image class="weui-grid__icon" src="../../img/wallet-1.png" />
  19. <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
  20. <view class="weui-grid__label label">待发货</view>
  21. </view>
  22. <!--已发货 -->
  23. <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended">
  24. <image class="weui-grid__icon" src="../../img/wallet-2.png" />
  25. <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
  26. <view class="weui-grid__label label">待收货</view>
  27. </view>
  28. <!--已完成 -->
  29. <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed">
  30. <image class="weui-grid__icon" src="../../img/wallet-3.png" />
  31. <view class="weui-grid__label label">已完成</view>
  32. </view>
  33. </view>
  34. </view>
  35. </view>

个人中心 js 代码

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