视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
微信小程序滚动Tab实现左右可滑动切换
2020-11-27 22:32:26 责编:小采
文档

 微信小程序滚动Tab实现左右可滑动切换

效果:

最终效果如上。问题:

1、tab标题总共8个,所以一屏无法全部显示。
2、tab内容区左右滑动切换时,tab标题随即做标记(active)。
3、当active的标题不在当前屏显示时,要使其能显示到当前屏中。

一、wxml结构

tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动。

tab内容可左右滑动切换,使用swiper组件实现

为了偷懒,所以数据都通过wx:for遍历重复出来。

说明:

1、设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页
3、swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页

<view >
 <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
 <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">健康</view>
 <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">情感</view>
 <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">职场</view>
 <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">育儿</view>
 <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">纠纷</view>
 <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">青葱</view>
 <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">全部</view>
 <view class="tab-item {{currentTab==7?'active':''}}" data-current="7" bindtap="swichNav">其他</view>
 </scroll-view>
 <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
 style="height:{{winHeight}}rpx">
 <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
 <scroll-view scroll-y="true" class="scoll-h" >
 <block wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="*this">
 <view class="item-ans">
 <view class="avatar">
 <image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
 </view>
 <view class="expertInfo">
 <view class="name">欢颜</view>
 <view class="tag">知名情感博主</view>
 <view class="answerHistory">134个回答,2234人听过 </view>
 </view>
 <navigator url="/pages/askExpert/expertDetail" class="askBtn">问TA</navigator> 
 </view>
 </block>
 </scroll-view>
 </swiper-item>
 </swiper>
</view>

二、js部分

微信小程序在开发起来,个人感觉挺像vue的,以数据驱动视图的更新。所以在小程序中,不能直接操作dom,当然也不能使用jquery之类的库。

var app = getApp();
Page({
 data:{
 winHeight:"",//窗口高度
 currentTab:0, //预设当前项的值
 scrollLeft:0, //tab标题的滚动条位置
 expertList:[{ //假数据
 img:"avatar.png",
 name:"欢顔",
 tag:"知名情感博主",
 answer:134,
 listen:2234
 }]
 },
 // 滚动切换标签样式
 switchTab:function(e){
 this.setData({
 currentTab:e.detail.current
 });
 this.checkCor();
 },
 // 点击标题切换当前页时改变样式
 swichNav:function(e){
 var cur=e.target.dataset.current;
 if(this.data.currentTaB==cur){return false;}
 else{
 this.setData({
 currentTab:cur
 })
 }
 },
 //判断当前滚动超过一屏时,设置tab标题滚动条。
 checkCor:function(){
 if (this.data.currentTab>4){
 this.setData({
 scrollLeft:300
 })
 }else{
 this.setData({
 scrollLeft:0
 })
 }
 },
 onLoad: function() { 
 var that = this; 
 // 高度自适应
 wx.getSystemInfo( { 
 success: function( res ) { 
 var clientHeight=res.windowHeight,
 clientWidth=res.windowWidth,
 rpxR=750/clientWidth;
 var calc=clientHeight*rpxR-180;
 console.log(calc)
 that.setData( { 
 winHeight: calc 
 }); 
 } 
 });
 }, 
 footerTap:app.footerTap
})

三、wxss样式

.tab-h{
 height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{width: 100%;height: 100%;}
.avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{margin-top: 80rpx;}
.scoll-h{height: 100%;}

 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助大家,谢谢大家对本站的支持!

下载本文
显示全文
专题