微信小程序选项卡页面切换
2018-01-31 21:13
756 查看
最近搞了个微信小程序切换的demo,有点像头条的那个,我给你大家分享下。
代码如下:
index.wxml
index.wxss
index.js
这个可以在项目用,而且我之前也是见过有这样功能的小程序,特此献出代码,希望能帮到朋友们。
demo下载地址
代码如下:
index.wxml
<view class='topTabSwiper'> <view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>推荐</view> <view class='tab {{currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap='checkCurrent'>热点</view> <view class='tab {{currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>关注</view> </view> <swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange"> <swiper-item><view class='swiper_con'>welcome come to 推荐</view></swiper-item> <swiper-item><view class='swiper_con'>welcome come to 热点</view></swiper-item> <swiper-item><view class='swiper_con'>welcome come to 关注</view></swiper-item> </swiper>
index.wxss
.tab{float: left; width: 33.3333%;text-align: center;padding: 10rpx 0; } .topTabSwiper{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; zoom: 1;} .topTabSwiper:after{content: ""; clear: both;display: block;} .tabBorer{border-bottom: 1px solid #f00; color: #f00;} .swiper{width: 100%;} .swiper_con{text-align: center; width: 100%; height: 100%; padding: 80rpx 0;}
index.js
Page({ /** * 页面的初始数据 */ data: { currentData : 0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //获取当前滑块的index bindchange:function(e){ const that = this; that.setData({ currentData: e.detail.current }) }, //点击切换,滑块index赋值 checkCurrent:function(e){ const that = this; if (that.data.currentData === e.target.dataset.current){ return false; }else{ that.setData({ currentData: e.target.dataset.current }) } } })
这个可以在项目用,而且我之前也是见过有这样功能的小程序,特此献出代码,希望能帮到朋友们。
demo下载地址
相关文章推荐
- 014 - 微信小程序开发之选项卡(窗口顶部TabBar)页面切换
- 微信小程序开发之选项卡(窗口顶部TabBar)页面切换
- 微信小程序开发之选项卡(窗口顶部TabBar)页面切换
- 微信小程序开发之选项卡(窗口顶部/底部TabBar)页面切换
- 微信小程序开发之选项卡(窗口底部TabBar)页面切换
- 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
- 微信小程序开发之选项卡(窗口底部TabBar)页面切换
- 微信小程序开发之选项卡(窗口顶部TabBar)页面切换
- 微信小程序开发之选项卡(窗口顶部TabBar)页面切换
- 微信小程序选项卡切换
- 微信小程序 监听手势滑动切换页面实例详解
- 微信小程序滚动Tab选项卡:左右可滑动切换
- 微信小程序开发之选项卡滑动切换
- 转载【微信小程序】:微信小程序滚动Tab选项卡:左右可滑动切换(仿某宝)
- 微信小程序滚动Tab选项卡:左右可滑动切换
- 微信小程序学习(二)——首页多页面切换
- 微信小程序实现tab页面切换功能
- 微信小程序左右滑动切换页面详解及实例代码
- 微信小程序左右滑动切换页面示例代码--转载
- 微信小程序开发常用技巧(5)——view左右滑动,切换page页面