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 ...
随机推荐
- Kubernetes-dns 域名解析问题
问题描述:nginx不能解析域名,但是使用nslookup却可以解析域名 ./sbin/nginx -t nginx: [emerg] host not found in upstream " ...
- Spring-IOC bean 生命周期之 Lifecycle 钩子
Lifecycle callbacks Initialization callbacks.Destruction callbacks 要与容器的bean生命周期管理交互,即容器在启动后和容器在销毁前对 ...
- Codeforces 1133 F2. Spanning Tree with One Fixed Degree 并查集+生成树
好久没更新博客了,一直懒得动,这次更新一下. 题意大概是:给出一个图,求它的一个一号节点的度数恰好为D的生成树的方案. 一开始随便水了个乱搞贪心,不出意外并没有过. 仔细思考之后,对于这个问题我们可以 ...
- new的三种形态
C++语言一直被认为是复杂编程语言中的杰出代表之一,不仅仅是因为其繁缛的语法规则,还因为其晦涩的术语.下面要讲的就是你的老熟人—new: 它是一个内存管理的操作符,能够从堆中划分一块区域,自动调用构造 ...
- C中typedef 函数指针的使用
类型定义的语法可以归结为一句话:只要在变量定义前面加上typedef,就成了类型定义.这儿的原本应该是变量的东西,就成为了类型. int integer; //整型变量int *pointer ...
- beta冲刺后续讨论
目录 组员:胡绪佩 组员:何家伟 组员:黄鸿杰 组员: 翟丹丹 组员:周政演 组员:胡青元 组员:庄卉 组员:刘恺琳 组员:何宇恒 组员:刘一好 组员:葛家灿 组员:胡绪佩 总结 通过这次的Beta版 ...
- 【gulp】Gulp的安装和配置 及 系列插件
注意:要安装俩次gulp(全局和本地):全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能. 之前由大牛帮忙配置的gulp来用.今天时间充裕,就和小伙伴一起动手配置 ...
- ubuntu 服务器配置
一.apache.svn服务器的搭建 1.安装apache2 apt-get install apache2 2.下载安装svn服务和svn-apache连接库 sudo apt-get instal ...
- jQuery----初识jQuery
一.jQuery好处: ①写得少,做的多 ②链式编程 ③隐式迭代 ④解决兼容性问题 二.顶级对象 Dom中的顶级对象:document------>页面中的顶级对象 document.点出来的是 ...
- 【OS X系统】Xcode中搭建Python环境。
虽然按照网上教程一步一步来,但还是遇到了几个错误点,现整理出来,主要是自己做个笔记,同时也希望能帮助到其他像我一样第一次在Xcode上搭建Python环境的人.首先感谢原作者:https://zhid ...