微信小程序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导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

随机推荐

sharepoint 2013实践
之前在一篇文章中说过了SharePoint环境的安装.那么如何使用SharePoint开发一个站点呢?这就是本篇所要阐述的问题. 在如何具体操作之前,我们先来普及下SharePoint基础知识.Far ...
【python学习笔记】6.抽象
[python学习笔记]6.抽象创建函数: 使用def语句定义函数,不用声明参数类型,和返回值类型 def function_name(param1, param2): 'this is docum ...
Jenkins 部署 jmeter + Ant
安装Jenkins: 到jenkins官网下载相应的jenkins版本: 双击jenkins.msi启动安装,安装目录选择D:\Progrom Files\Jenkins,然后启动成功. Jenkin ...
linux PMBus总线及设备驱动分析
PMBus协议规范介绍 PMBus是一套对电源进行配置.控制和监控的通讯协议标准.其最新版本为1.3,该规范还在不断演进中,比如新标准中新增的zone PMBus.AVSBus等特性.在其官网上有详细 ...
selenium 学习之路开始了,一遍搬一遍理解学习,加油!!!
selenium 学习之路开始了,一遍搬一遍理解学习,加油!!!
kubernetes关键概念总结
service 每个service对应一个cluster IP,cluster IP对应的服务网段最初是在配置kube-apiserver.kube-controller-manager和kube-p ...
ER图
E-R图也称实体-联系图(Entity Relationship Diagram), 提供了表示实体类型.属性和联系的方法,用来描述现实世界的概念模型. 它是描述现实世界概念结构模型的有效方法.是表示 ...
快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
nodejs mysql 数据查询例子
1.安装nodejs 2.安装mysql npm包地址:https://github.com/felixge/node-mysql npm install mysql 3.相应API查看及调用: ...
LeNet-5识别MINIST数据集
LeNet-5 LeNet于90年代被提出,鉴于当时的计算能力和内存容量,直到2010年才能真正的实施这样的大规模计算.LeNet-5是LeCun于1998年提出的深度神经网络结构,总共包含7层网络( ...

微信小程序tab（swiper）切换

微信小程序tab（swiper）切换的更多相关文章

随机推荐

热门专题