微信小程序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导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...
随机推荐
- c#开发wps插件
wps 2016版比旧版感觉大气多了,加载速度快,操作方便,一直是wps的优点.随着wps的稳定性提高(当然比office还是差了很多),政府等一些部门采用几乎免费的wps来办公.我们公司决定把业务扩 ...
- uwsgi服务启动(start)停止(stop)重新装载(reload)
1. 添加uwsgi相关文件 在之前的文章跟讲到过centos中搭建nginx+uwsgi+flask运行环境,本节就基于那一次的配置进行说明. 在www中创建uwsgi文件夹,用来存放uwsgi相关 ...
- java——对象学习笔记
1.面向对象(OOP)的三大特性 对象的行为(behavior):可以对对象施加哪些操作,或者可以对对象施加哪些方法. 对象的状态(state):当施加那些方法后,对象如何响应. 对象标识(ident ...
- AJAX跨域问题解决方法（1）——禁止浏览器进行跨域限制
思路:通过命令行修改浏览器启动参数,使得浏览器不进行跨域检查,从而允许跨域 方法:命令行参数启动浏览器后添加参数--disable-web-security 例:chrome --disable-we ...
- QT 5.9版本 使用MSVC2015编译时出现中文字符乱码问题的解决方法
解决方法主要分为两种: 1.在项目->Project Settings ->编辑器 ->文件编码中使用System 2.对于中文字符,使用QString::fromLocal8Bit ...
- 设计模式——观察者模式（C++实现）
#include <iostream> #include <vector> #include <algorithm> #include <iterator&g ...
- WinSock 异步I/O模型
如果你想在Windows平台上构建服务器应用,那么I/O模型是你必须考虑的. Windows操作系统提供了五种I/O模型,分别是选择(select)模型,异步选择(WSAAsyncSelect)模型, ...
- New FileReader上传图片
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader() ...
- linux 的tee命令
tee 如果你在linux下希望将程序或命令运行的信息,在输入到文件的同时,也能够显示在屏幕上,你可以考虑使用tee这个命令.举个例子,直接上图 这里我调用函数aaa来完成将结果输入到aaa.log里 ...
- nginx配置防盗链
location ~* \.(gif|jpg|swf|flv|mp3|mp4|zip|rar)$ { root /home/soft; valid_referers *.qinyj.top downl ...