微信小程序顶部tab切换以及滑动

效果图图片如下

实现代码xml中

<view class="swiper_tab_view"><scroll-view scroll-x='true' scroll-left="{{scrollleft}}" class='tab-h'><view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"bindtap="swichNav">要闻</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">视频</view><view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">推荐</view> <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">上海</view> <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">娱乐</view> <view class="swiper-tab-list {{currentTab==5 ? 'on' : ''}}" data-current="5" bindtap="swichNav">体育</view>  </scroll-view>
</view><swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">  <swiper-item>  <view>要闻</view>  </swiper-item>   <swiper-item>  <view>视频</view>  </swiper-item>   <swiper-item>  <view>推荐</view>  </swiper-item><swiper-item>  <view>上海</view>  </swiper-item><swiper-item>  <view>娱乐</view>  </swiper-item><swiper-item>  <view>体育</view>  </swiper-item></swiper>

Page({/*** 页面的初始数据*/data: {winWidth: 0,winHeight: 0,scrollleft:0,currentTab: 0,  },/** * 滑动切换tab */bindChange: function (e) {var that = this;that.setData({currentTab: e.detail.current});this.checkCor();},/** * 点击tab切换 */swichNav: function (e) {var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current})}},checkCor:function(){if(this.data.currentTab>4){this.setData({scrollleft:300})}else{this.setData({scrollleft:0})}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;/** * 获取系统信息 */wx.getSystemInfo({success: function (res) {that.setData({winWidth: res.windowWidth,winHeight: res.windowHeight});}});  },

wxss

/**index.wxss**/
.tab-h{height: 57rpx;width: 100%;line-height: 51rpx;background: white;font-size: 16px;white-space: nowrap;z-index: 999;margin-top: 20rpx;
}.swiper_tab_view{width: 100%;text-align: center;line-height: 80rpx;
}.swiper-tab-list {font-size: 30rpx;display: inline-block;width: 20%;color: #777;
}.on {color: #da7c0c;border-bottom: 5rpx solid #da7c0c;
}.swiper-box {display: block;height: 100%;width: 100%;overflow: hidden;
}.swiper-box view {text-align: center;
}

这样实现了效果如果顶部tab不是很多的话就可以不实用scroll-view 嵌套在外层

忘了参考谁的代码写的了,实在抱歉, 这里就不给出demo了,复制过去就可以实现效果,

微信小程序顶部tab切换以及滑动相关推荐

微信小程序实现tab切换和吸顶效果
在项目中合理的采用webapp的组件库能够很好的提高我们的开发效率,我们也应该合理的进行运用. 首先我们是对手机的状态栏的代码进行了自定义. 其次就是采用组件库的van-sticky进行吸顶距离计算 ...
微信小程序--顶部状态栏切换
效果展示 Demo代码 index.wxml <view><view class='Tab'><view class='tabImg ...
小程序顶部tab切换
首先我们看效果接下来是wxml部分代码  <view class="nav_title"><view class=&quo ...
原生微信小程序实现tab切换效果demo
效果图 Wxml  <view class="nav_title"><view class="nav_tab&qu ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
微信小程序点击切换tab跟随动画
微信小程序点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
微信小程序仿抖音上下滑动整屏切换视频
微信小程序仿抖音上下滑动整屏切换视频使用官网上面的扩展组件官方使用的方式: 可结合自己业务修改: 使用官网上面的扩展组件 https://developers.weixin.qq.com/mini ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...

微信小程序顶部tab切换以及滑动

微信小程序顶部tab切换以及滑动相关推荐

最新文章

热门文章