NO--15 微信小程序，scroll-view选项卡和跳转

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

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;

}

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

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

NO--19 微信小程序之scroll-view选项卡与跳转（二）
本篇为大家介绍为何我们在最后做交互的时候,并没有使用上一篇讲的选项卡的效果. scroll-view与跳转.gif (如无法查看图片,还请翻看上一篇!) 大家注意看,在我点击跳转后,首先能看到的是 ...
微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述一.横向滚动创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
微信小程序实现tabs选项卡
选项卡在我们的日常开发中,使用的还是蛮多的,但是微信小程序中却没有直接提供选项卡组件,不过我们可以变通通过 scroll-view 和 swiper 组件来实现一个选项卡的功能. 需求: 实现一个选项 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
微信小程序-滚动Tab选项卡
前言:今天呢给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...
微信小程序滚动Tab选项卡：左右可滑动切换
最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...
微信小程序 scroll-view 实现锚点跳转
在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...
微信小程序开发--页面之间的跳转
一.navigator--完成页面之间的跳转 1.新建一个页面文件夹 2.在app.json文件中引入页面 "pages": [ "pages/index/index&q ...
运用wxs制作微信小程序左滑功能和跳转，性能更优越
锲子微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅.如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20 ...

随机推荐

iOS 网络缓存总结
一.缓存策略: 1.缓存策略的配置: 缺省缓存策略的存储策略需要服务器的响应配置: 缺省缓存策略的使用需要请求端的配置: 2.缓存策略的缺陷: 移动端比较通用的缓存策略是先使用缓存同时更新本地数据: ...
P3623 [APIO2008]免费道路
3624: [Apio2008]免费道路 Time Limit: 2 Sec Memory Limit: 128 MBSec Special Judge Submit: 2143 Solved: 88 ...
Upgrade Oracle Database 12c Release 2(12.2) RAC on RHEL7.3 with RU
Upgrade Oracle Database 12c Release 2(12.2) RAC on RHEL7.3 -- [ RU: 26610291 (GRID INFRASTRUCTURE RE ...
[Baltic2014]friends
嘟嘟嘟首先想想暴力的做法,枚举加入的字符,然后判断删去这个字符后两个长度为n / 2的字符串是否相等,复杂度O(n2). 所以可以想办法把判断复杂度降低到O(1),那自然就想到hash了.hash是 ...
[USACO09JAN]Earthquake Damage
嘟嘟嘟刚开始因为没看到只能走没有损坏的农场,磨叽了20多分钟……不管了,写题解吧. 首先如果一个点不能到达原点,那么和他相邻的点也不能到达原点,所以刚开始我们把不能走的点和他相邻的点都打上标记,然后 ...
chrome的uget扩展程序红色 Unable to connect with uget-integrator问题
我们根据网上的教程在ubuntu16.04中安装下载工具uget+aria2并配置chrome时,最后重新打开chrome浏览器,发现uget扩展程序是红色的,点开看到”Unable to conne ...
Hadoop学习之路（四）Hadoop集群搭建和简单应用
概念了解主从结构:在一个集群中,会有部分节点充当主服务器的角色,其他服务器都是从服务器的角色,当前这种架构模式叫做主从结构. 主从结构分类: 1.一主多从 2.多主多从 Hadoop中的HDFS和Y ...
Day2 CSS
什么是CSS 层叠样式表(cascading style sheet) 控制页面元素的显示方式.(添加样式) CSS语法行间样式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出C ...
理解JavaScript继承（一）
理解JavaScript继承(一) 我们都知道,面向对象的编程语言非常强大,之所以强大,就是其支持继承.在JavaScript中,也支持继承,而且有多种方法实现继承,比如原型链继承,借用构造函数继承, ...
节点和Topic通信
1.简介对于实时性. 周期性的消息, 使用topic来传输是最佳的选择. topic是一种点对点的单向通信方式, 这里的“点”指的是node, 也就是说node之间可以通过topic方式来传递信息. ...

NO--15 微信小程序，scroll-view选项卡和跳转

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

随机推荐

热门专题