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

随机推荐

linux的基本操作命令
linux的基本命令操作: 1.什么是Linux 是一个OS,是Unix克隆版2.命令的基本格式: 命令 [选项]... [参数]... //格式 ls ...
为hadoop集群设置静态IP
-更新2017年3月1日19:38:49-- 以下是Nat 网络设置,如果你想要同一局域网内的主机可以远程连接上你的集群环境,建议使用桥接模式,具体原因可看文末三种网络连接模式的区别. 由于之前设置集 ...
Bond UVA - 11354（LCA应用题）
Once again, James Bond is on his way to saving the world. Bond's latest mission requires him to trav ...
loadrunner 录制中文出现乱码的解决办法
python中的str.strip（）的用法
python中字符串str的strip()方法 str.strip()就是把字符串(str)的头和尾的空格,以及位于头尾的\n \t之类给删掉. 例1:str=" ABC"prin ...
Python : Module
在Python中,一个.py文件代表一个Module.在Module中可以是任何的符合Python文件格式的Python脚本.了解Module导入机制大有用处. 1 Module 组成 1.1 Mod ...
[ZJOI2007] 矩阵游戏
Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两 ...
AsyncTask源码笔记
AsyncTask源码笔记 AsyncTask在注释中建议只用来做短时间的异步操作,也就是只有几秒的操作:如果是长时间的操作,建议还是使用java.util.concurrent包中的工具类,例如Ex ...
hi-nginx-1.3.4编译安装
hi-nginx既是 web 服务器,也是 application 服务器.它开源在https://github.com/webcpp/hi-nginx 它是NGINX的超集,因此与编译NGINX稍有 ...
排序算法Java实现（冒泡排序）
算法描述:对于给定的n个记录,从第一个记录开始依次对相邻的两个记录进行比较,当前面的记录大于后面的记录时,交换位置,进行一轮比较和交换后,n个记录中的最大记录将位于第n位:然后对前(n-1)个记录进行 ...

微信小程序tab（swiper）切换

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

随机推荐

热门专题