微信小程序实现选项卡

.wxml

<view class="swiper-tab"><view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view><view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">提现中</view><view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已提现</view>
</view><swiper current="{{currentTab}}" duration="300"  bindchange="swiperTab"><swiper-item ><view>全部</view></swiper-item><swiper-item><view>提现中</view></swiper-item><swiper-item><view>已提现</view></swiper-item>
</swiper>

.wxss

.swiper-tab{width: 100%;border-bottom: 2rpx solid #ccc;text-align: center;height: 88rpx;line-height: 88rpx;display: flex;flex-flow: row;justify-content: space-between;
}
.swiper-tab-item{width: 30%; color:#434343;
}
.active{color:#F65959;border-bottom: 4rpx solid #F65959;
}
swiper{text-align: center;
}

.js

var app = getApp()
Page({data: {currentTab: 0},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},//滑动切换swiperTab: function (e) {var that = this;that.setData({currentTab: e.detail.current});},//点击切换clickTab: function (e) {var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current})}}
})

转载于:https://www.cnblogs.com/150536FBB/p/9993103.html

微信小程序实现选项卡相关推荐

微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
如何实现微信小程序的选项卡
直接先上选项卡的效果图片结构代码 <view class="container">classify </view> <view class=&quo ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...
微信小程序滚动选项卡 swiper高度自适应
最近做小程序的时候遇到了swiper高度的问题,swiper里面的内容可以根据数据来自适应高度.那就给scroll-view计算一下高度 wxml <view class="conta ...
微信小程序tab选项卡，点击弹窗（带蒙版）五星好评-获取微信手机号码
 <view class="swiper-tab"><view cl ...
微信小程序 tab选项卡，可点击，可滑动
看下效果图: <view class="swiper-tab"><view class="swiper-tab-item {{currentTab==0 ...
微信小程序 - tab选项卡切换的实现方法
页面效果大体思路首先是把新闻的内容,还有活动的内容都列到wxml上然后把tab写出来.现在的难点是如何把tab和下面的内容联系起来我们定义一个公共变量,变量名是state,当state= 'n ...
微信小程序：选项卡切换内容效果
wxml: <view class="swiper-tab"><view class="swiper-tab-list {{currentTab==0 ...
微信小程序联盟：官方文档+精品教程+demo集合（未完待续，持续更新中……）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

微信小程序实现选项卡

微信小程序实现选项卡相关推荐

最新文章

热门文章