手记

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程
继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

刘员外_ 2018-07-08 01:08:27 浏览 6345
刘员外_
关注TA
已关注
手记 66
粉丝 8380
获赞 109

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


279

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}}</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}}</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}}</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}}</text>
        </view>
      </view>
    </scroll-view>
  </swiper-item> </swiper>

全部订单 js  代码

// 全部订单页//获取应用实例var app = getApp()
Page({  /*** 页面的初始数据 */
  data: {    // 选项卡
    winWidth: 0,    winHeight: 0,    // tab切换  
    currentTab: 0, 
    // 商品内容数据
    carts: [
      { imgurl: '../../img/fen-2.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 }, 
      { imgurl: '../../img/fen-1.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
      { imgurl: '../../img/fen-2.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
      { imgurl: '../../img/fen-1.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
    ],
  },  /** * 滑动切换tab  */
  bindChange: function (e) {    var that = this;
    that.setData({ currentTab: e.detail.current });
  },  /** * 点击tab切换  */
  swichNav: function (e) {    var that = this;    if (this.data.currentTab === e.target.dataset.current) {      return false;
    } else {
      that.setData({        currentTab: e.target.dataset.current
      })
    }
  },  /*** 生命周期函数--监听页面加载*/
  onLoad: function (options) {    var that = this;    /** * 获取系统信息  */
    wx.getSystemInfo({      success: function (res) {
        that.setData({          clientHeight: res.windowHeight
        });
      }
    });
  },  /*** 生命周期函数--监听页面显示*/
  onShow: function () {    if (app.globalData.currentLocation == '') {      this.setData({        currentTab: 0
      });
    } else {      var i = app.globalData.currentLocation;      this.setData({        currentTab: i
      });
    }
  }
})

全部订单 wxss 代码

.scroll-view_H{  white-space: nowrap;
}.scroll-view-item_H{  display: inline-block;  width: 20%;  box-sizing: border-box;
}.list-liu{  width: 100%;  height: 85rpx;  position: fixed;  left: 0;  top: 0;  z-index: 1;  background: #fff;  border: 1rpx solid #eee;
}.on{  color: #c80611;
}.list-liu .swiper-tab-list{  text-align: center;  line-height: 85rpx;  font-size: 34rpx;
}.kong{  width: 100%;  height: 85rpx;
}/*----------------------分割线-------------------  *//*购物车 全部订单 我的收藏 浏览记录 样式  *//* 列表 */.list{width: 100%;background: #fff;margin-top:20rpx;display: flex;box-sizing: border-box;padding:10rpx 30rpx 10rpx 30rpx ;border-bottom: 1px solid #eee}.carts-radio{flex: 1;line-height: 180rpx;text-align: center}/* 选项框 */.pic{flex: 3;height: 180rpx;}.pic image{width: 100%;height: 100%;}.con{flex: 6;padding-left: 20rpx;padding-bottom: 20rpx;box-sizing: border-box}view,text,block{    font-family: "Microsoft Yahei"}/* 类型描述 */.type1{  padding-top: 10rpx;  display: block;  font-size: 30rpx;  color: #323232;  width:100%;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:2;  -webkit-box-orient: vertical;
} .type2{   display: flex;  font-size: 28rpx;  color: #666;  width:100%;  padding-top: 20rpx;box-sizing: border-box
}/* 数量 */.num{  width: 140rpx;  height: 40rpx;  border: 1px solid #eee;  margin-top: 15rpx;  background: #fff} 
.num2{  float: left;  width: 56rpx;  line-height: 40rpx;  text-align: center; font-size: 28rpx; color: #666666}.num1{float: left;width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;font-size: 36rpx;padding: 0;color: #4a4949;border-right: 1px solid #eee;
}.num3{float: right;width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;font-size: 36rpx;padding: 0;margin: 0;border-radius: 0px;color: #4a4949;border-left: 1px solid #eee;
} 

/* 价格 */.price{flex: 3;font-size: 30rpx;color: #c90211;box-sizing: border-box;position: relative} .price1{position: absolute;right: 0;top: 0} .number{position: absolute;right: 0;top: 40rpx}/* 删除 */.del{width: 50rpx;height: 50rpx;position: absolute;right: 0;bottom: 20rpx}/*----------------------分割线-------------------  *//**app.wxss**/.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  box-sizing: border-box;
} 
/*----------------------分割线-------------------  *//*首页商品类样式  */.content{  display: flex;  flex-wrap:  wrap;
}.content-1{  width: 375rpx;  /* height: 420rpx; */
  padding:20rpx 10rpx ;  box-sizing: border-box;  border-bottom: 2rpx solid #cccccc;  border-right: 1rpx solid #cccccc;
}.content-1 image{  width: 374rpx;  height: 252rpx;  margin-left: -8rpx;
}.content-1 .price .text-price{  color: #b20000;  font-size: 32rpx;  font-weight: bold;
}.content-1 .price .text-yj{  color: #656565;  font-size: 24rpx;
}.content-1 .price .text-oldprice{  text-decoration: line-through;  color: #656565;  font-size: 24rpx;
}.content-1 .name .text-name{  font-size: 28rpx;  color: #323232;
}.content-1 .dress{  margin-top: 10rpx;
}.content-1 .dress .dress-1{  float: left;  color: #989898;  font-size: 24rpx;
}.content-1 .dress .dress-2{  float: right;  color: #989898;  font-size: 24rpx;  margin-right: 20rpx;
}

下篇为大家说明 为何最后做交互的时候，并没有使用该效果。
如有疑问请回复！




打开App，阅读手记
相关标签
Android
JavaScript
1人推荐
发表评论
随时随地看视频慕课网APP

热门评论

博主，我想问问为什么我页面跳转过去了但是不加载数据


查看全部评论

相关课程

RN入门到进阶，打造高质量上线App

¥399 中级 3144

经典再升级-FFmpeg5.0核心技术精讲，打造音视频播放器

¥348 中级 2703

5G时代必备音视频WebRTC实时互动直播技术入门与实战

¥288 中级 2512

Android摄像头基础

免费 高级 44932

AIDL-小白成长记

免费 中级 42601

移动端架构师

¥5388 561

相关阅读

Android 集成 React Native 和 Ionic
大前端 Android 开发日记九：微博分享
最全面总结 Android WebView与 JS 的交互方式
微信小程序全面实战，架构设计 && 躲坑攻略
WebView深度学习（一）之WebView的基本使用以及Android和js的交互