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 ...
随机推荐
- 微信小程序 动态加载class
<view class=' {{topid==1?"top": "untop"}}' >
- 安装MySQL-python
安装MySQL-python 1. yum -y install mysql mysql-devel 2. yum -y install python-devel 3. pip install -i ...
- 说说Javac
Java语言有Java语言的规范,,这个规范详细描述了Java语言有哪些词法.语法,而Java虚拟机也有其Java虚拟机的规范,同样Java虚拟机的规范和Java语言规范并不一样,它们都有自己的词法和 ...
- 【转】如何在VMware上安装macOS Sierra 10.12
本文主要介绍目前网络上比较流行的使用预安装镜像安装macOS 10.12的方法,并以9月20号发布的最新GM版本16A323为例. 安装方案 破解VMware 创建虚拟机,加载预安装镜像 初始化mac ...
- 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...
- C语言程序设计I—第一周教学
这是在修改人才培养方案后第一次上C语言程序设计课程,本课程由原来的1学期80课时(周学时6)修改为2学期48(周学时4)+32(周学时2)课时的模式,开课学期也由一年二期改为大一整学年,当时修改的主要 ...
- P1446 [HNOI2008]Cards
题目描述 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案. 进一步,小春要求染出Sr张红色,Sb张蓝 ...
- 以登录实现理解Servlet+jsp+JavaBean开发
写在前面:菜鸟拙见,望请纠正 学过servlet的都知道,书本上一直说servlet一直作为控制器使用,它不实现view层,也不做具体的事务处理,那servlet到底是干什么的哪?怎么合理的用它呐?? ...
- 浅谈User Information List
[User Information List]用于查看一个site collection所有可以访问的用户信息.一个site collection只有一个User Information List表. ...
- CentOS6安装各种大数据软件 第四章：Hadoop分布式集群配置
相关文章链接 CentOS6安装各种大数据软件 第一章:各个软件版本介绍 CentOS6安装各种大数据软件 第二章:Linux各个软件启动命令 CentOS6安装各种大数据软件 第三章:Linux基础 ...