微信小程序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导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...
随机推荐
- php 创建和修改文件内容
file_put_contents写入文件 我们先来学习第一种写入文件的方式: int file_put_contents ( string $文件路径, string $写入数据]) 功能:向指定的 ...
- IDEA jsp模板
> File > Settings- > File and Code Templates > Other >Jsp files >Jsp File.jsp < ...
- MySQL增量订阅&消费组件Canal POC
POC的目的:1.与MYSQL的对接方式,配置文档2.订阅的延迟3.订阅后宕机消息会不会丢失4.能不能从指定的点开始重新订阅5.高并发写入的时候,日志的顺序是否还能保持,不考虑消费的情况订阅是否会延迟 ...
- 在 WinForm 中 如何实现 加载等待功能
1,需要一个动态的londing文件:在项目中我们新建一个文件夹来存放它: 2,在需要出现londing状态的窗体上加上一个Panel: 黄色区域是Panel,灰色的是需要被加载的区域.当需要触发lo ...
- java web(转)
装载:http://www.oschina.net/question/12_52027 OSCHINA 软件库有一个分类——Web框架,该分类中包含多种编程语言的将近500个项目. Web框架是开发者 ...
- Problem : 1196 ( Lowest Bit )
第一次一次通过,逻辑太简单... #include<iostream> using namespace std; void main() { int n; while(cin>> ...
- C语言第二次博客作业---分支结构
一,PTA实验作业 题目1.计算分段函数 本题目要求计算下列分段函数f(x)的值: 1.实验代码 double x,result; scanf("%lf",&x); if( ...
- NumPy入门
import numpy as np 数组与标量之间的运算作用于数组的每一个元素.
- java基础学习系列二
循环语句 1,for(){} 2,while(){} 3,do{}while() continue和break用法 break是结束循环 continue结束本次循环
- ELK学习笔记（三）单台服务器多节点部署
一般情况下单台服务器只会部署一个ElasticSearch node,但是在学习过程中,很多情况下会需要实现ElasticSearch的分布式效果,所以需要启动多个节点,但是学习开发环境(不想开多个虚 ...