微信小程序 tab选项卡，可点击，可滑动

看下效果图：

<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" style='height:80%;'><swiper-item ><view>最新</view></swiper-item><swiper-item><view>热门</view></swiper-item><swiper-item><view>游戏</view></swiper-item>
</swiper>

page{height: 100%;
}
.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;
}

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

想要获得更多资料的请微信搜索公众号【热血科技】，关注一下即可。

微信小程序 tab选项卡，可点击，可滑动相关推荐

微信小程序tab选项卡，点击弹窗（带蒙版）五星好评-获取微信手机号码
 <view class="swiper-tab"><view cl ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序 - tab选项卡切换的实现方法
页面效果大体思路首先是把新闻的内容,还有活动的内容都列到wxml上然后把tab写出来.现在的难点是如何把tab和下面的内容联系起来我们定义一个公共变量,变量名是state,当state= 'n ...
微信小程序tab切换（点击标题切换，滑动屏幕切换）
效果图: WXML文件 <view class="tab"><scroll-view class="nav" scroll-x="t ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...
如何实现微信小程序的选项卡
直接先上选项卡的效果图片结构代码 <view class="container">classify </view> <view class=&quo ...

微信小程序 tab选项卡，可点击，可滑动

微信小程序 tab选项卡，可点击，可滑动相关推荐

最新文章

热门文章