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

随机推荐

基于 HTML5 WebGL 的 3D 机房
前言用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最 ...
洛谷 P1146 【硬币翻转】题解
很久很久之前做过的一道题翻n-1枚硬币,就是有一枚不翻,也可以理解为翻一枚直接上程序,看程序说话 #include<iostream> using namespace std; ; b ...
Android Screen Monito
1.下载 Android Screen Monitor http://code.google.com/p/android-screen-monitor/ (1) 下載 ASM_2_40.zip 并解压 ...
设计模式——观察者模式（C++实现）
#include <iostream> #include <vector> #include <algorithm> #include <iterator&g ...
Eclipse中JRE(unbound)问题的一种解决方法
(如果有写的不对的地方,欢迎指正!) 1.检查Java环境变量配置是否有问题 jdk1.8环境变量配置(1.8和8是一个意思) jdk9环境变量配置注:配置不成功的一种可能是安装多个jdk,解决方法 ...
Intel 移位指令的陷阱（转）
今天发现了一个Intel逻辑左移指令shl的一个bug. 逻辑左移的概念是对给定的目的操作数左移COUNT次,每次移位时最高位移入标志位CF中,最低位补零. 其中OPRD1为目的操作数, 可以是通 ...
Node的前端化工具
1.页面实时更新 browser-sync start --server --files "css/*.css, *.html,js/*.js"
大数据 --> 安装Hadoop-单机模式（1）
安装Hadoop-单机模式(1) 一.在Ubuntu下创建hadoop组和hadoop用户 1)创建hadoop用户组 sudo addgroup hadoop //添加用户组 2)创建hadoop用 ...
STL --> set用法
set用法一.set和multiset基础 set和multiset会根据特定的排序准则,自动将元素进行排序.不同的是后者允许元素重复而前者不允许. 需要包含头文件: #include <se ...
Algorithm --> 最长公共子序列（LCS）
一.什么是最长公共子序列什么是最长公共子序列呢?举个简单的例子吧,一个数列S,若分别是两个或多个已知序列的子序列,且是所有符合条件序列中最长的,则S称为已知序列的最长公共子序列. 举例如 ...

微信小程序tab（swiper）切换

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

随机推荐

热门专题