微信小程序tab（swiper）切换
<- wxml -> <view class="youhui">
<view class="{{_num==0?'active':''}}" data-index='' bindtap='toggle'>
未使用
</view>
<view class="{{_num==1?'active':''}}" data-index='' bindtap='toggle'>
已使用
</view>
<view class="{{_num==2?'active':''}}" data-index='' bindtap='toggle'>
已过期
</view>
</view> <swiper current="{{_num}}" class="swiper-box" duration="" bindchange="bindChange" style='min-height:645rpx'>
<!-- 未使用 -->
<swiper-item>
<view class="yohui_article">
<view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view>
<view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl014.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
<view class="control">
<navigator>去使用</navigator>
</view>
</view>
</view>
</view>
</swiper-item>
<!-- 已使用 -->
<swiper-item>
<view class="yohui_article youhui_article1">
<view>
<view style="background:url('../img/wyl015.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl015.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl015.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view>
</view>
</swiper-item>
<!-- 已过期 -->
<swiper-item>
<view class="yohui_article youhui_article2">
<view>
<view style="background:url('../img/wyl016.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl016.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view> <view>
<view style="background:url('../img/wyl016.png') no-repeat; background-size:100%;">
<view class="Size">
<text class="smallSize">￥</text>
<view class="">
<text>10元</text>
</view>
</view>
<view>
<text>满99元使用</text>
<text>2018.3.29至2018..12s使用</text>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<- wxss ->
.youhui{
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-around;
background-color: #fff;
height:100rpx;
font-size: 32rpx;
border-top:1px solid #F0F0F0;
border-bottom:1px solid #F0F0F0;
}
.youhui>view{
display: flex;
align-items: center;
}
.active{
color: #DF2E26;
border-bottom:3px solid #DF2E26;
}
/* 有优惠 */
.yohui_article{
width: 100%;
}
.yohui_article>view{
padding:15rpx 20rpx;
box-sizing: border-box;
}
.yohui_article>view>view{
min-height:185rpx;
display: flex;
flex-direction: row;
font-size: 28rpx;
/* justify-content: space-between; */
color: #fff;
align-items: center;
}
.youhui_article1>view>view{
color: #727272;
}
.youhui_article2>view>view{
color: #FFF4F4;
}
.Size{
display: flex;
width: 27%;
font-size:44rpx;
align-items: baseline;
}
.smallSize{
font-size: 28rpx;
margin-left: 30rpx;
}
.yohui_article>view>view>view:nth-of-type(2){
display: flex;
flex-direction: column;
font-size: 24rpx;
}
.youhui_article1>view>view>view:nth-of-type(2){
color:#8A8A8A;
}
.yohui_article>view>view>view:nth-of-type(2)>text:nth-of-type(1){
font-size:38rpx;
margin-bottom: 30rpx;
}
.control{
margin-left:30rpx;
}
.control navigator{
width:150rpx;
height:55rpx;
line-height:55rpx;
background-color: #662727;
text-align: center;
border-radius: 6rpx;
}
<- js ->
let app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
state:0,
_num:'0'
},
/**
* 点击tab切换
*/
toggle(e){
console.log(e.currentTarget.dataset.index);
if (this.data._num === e.currentTarget.dataset.index) {
return false;
} else {
this.setData({
_num: e.currentTarget.dataset.index
})
}
// if (e.currentTarget.dataset.index=="0"){
// this.setData({
// state: 0,
// _num: e.target.dataset.index
// })
// } else if (e.currentTarget.dataset.index == "1"){
// this.setData({
// state:1,
// _num: e.target.dataset.index
// })
// } else if (e.currentTarget.dataset.index == "2"){
// console.log('已进入已过期');
// this.setData({
// state: 2,
// _num: e.target.dataset.index
// })
// }
},
bindChange: function (e) {
var that = this;
console.log(e)
that.setData({
_num: e.detail.current
});
switch (e.detail.current) {
case 0:
that.data.state = 0
break;
case 1:
that.data.state = 1
break;
case 2:
that.data.state = 2
break;
}
// wx.request({
// url: app.baseURL + 'act=member_invoice&op=mycomposegroup',
// data: {
// appid: app.appid,
// pagenums: "1",
// member_id: app.member_id,
// state: that.data.state
// },
// header: {
// 'content-type': 'application/json' // 默认值
// },
// success: function (res) {
// app.allorders = res.data.datas.goods
// that.setData({
// list: res.data.datas.goods,
// height: res.data.datas.goods.length * 215
// })
// }
// })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
}
})
微信小程序tab（swiper）切换的更多相关文章
- 微信小程序 - tab+swiper切换（非组件）
无奈slot不支持循环,无法成为组件. 该模板适用于新闻等,点击下载示例:tabswiper
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序tab栏切换
Wxml代码:<view class="body"> <view class="nav bc_white"> <view clas ...
- 微信小程序--Tab栏切换的快速实现
上效果! wxss样式代码: .tabs-item.selected { color:rgba(,,,.); border-bottom:2px solid rgba(,,,.); } .tabs-i ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 微信小程序开发--路由切换，页面重定向
这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigat ...
- 微信小程序 - 自适应swiper高度（非组件）
微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情 原理: 利用css3 横轴滚动属性overflow:scroll,设置死swipe ...
- 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现
简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...
随机推荐
- 没有基础的初学者学java怎样快速入门?超全的学习路线图
现在地球人都知道互联网行业工资高,上万都是小case,不值一提.可是对于大部分人来说,工资七八千都算很难了.那我也想学java,当程序员,赚大钱.可是作为一个初学者,怎样才可以快速入门呢?早点入门就可 ...
- Y2 MyBatis(二)
春节后的第一次课 1.整合日志(log4j和logback) (1)log4j和logback都是一个日志记录框架 (2)appender记住两个 stdout控制台显示日志,file记录文件中 (3 ...
- 十大经典排序算法最强总结（含JAVA代码实现）
最近几天在研究排序算法,看了很多博客,发现网上有的文章中对排序算法解释的并不是很透彻,而且有很多代码都是错误的,例如有的文章中在“桶排序”算法中对每个桶进行排序直接使用了Collection.sort ...
- HashSet实现不重复储值原理-附源码解析
在HashSet中,基本的操作都是由HashMap底层实现的,因为HashSet底层是用HashMap存储数据.当向HashSet中添加元素的时候,首先计算元素的hashcode值,然后用这个(元素的 ...
- 关于eclipse安装Genymotion插件的方法
其实Genymotion的安装方法也有两种:在线安装和离线安装,不过推荐使用在线安装,这个更快.这里我只说在线安装的方法. 打开eclipse,点击help-install new software ...
- 文本编辑工具vim
前面多次提到过vim这个东西,它是linux中必不可少的一个工具.没有它很多工作都无法完成.早期的Unix都是使用的vi作为系统默认的编辑器的.你也许会有疑问,vi与vim有什么区别?可以这样简单理解 ...
- .NET Core快速入门教程 5、使用VS Code进行C#代码调试的技巧
一.前言 为什么要调试代码?通过调试可以让我们了解代码运行过程中的代码执行信息,比如变量的值等等.通常调试代码是为了方便我们发现代码中的bug.ken.io觉得熟练代码调试技巧是成为合格程序员的基本要 ...
- Redis一次数据丢失（转）
一台Redis服务器,4核,16G内存且没有任何硬件上的问题.持续高压运行了大约3个月,保存了大约14G的数据,设置了比较完备的Save参数.而就是这台主机,在一次重起之后,丢失了大量的数据,14G的 ...
- mysql的备份脚本
mysql的备份脚本 脚本如下 #!/bin/sh # mysql_backup.sh: backup mysql databases and keep newest 5 days backup. # ...
- Axure RP简单作品
点击按钮,同时出现1-7 点击按钮,依次出现1-7,