微信小程序实现滚动Tab选项卡


Posted in Javascript onNovember 16, 2020

本文实例为大家分享了微信小程序实现滚动Tab选项卡的具体代码,供大家参考,具体内容如下

微信小程序实现滚动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="/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%;}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
js内置对象 学习笔记
Aug 01 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
vue实现表格过滤功能
Sep 27 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 Javascript
小程序实现tab标签页
Nov 16 #Javascript
vue+Element-ui实现登录注册表单
Nov 17 #Javascript
Vue+Element-U实现分页显示效果
Nov 15 #Javascript
vue+Element-ui前端实现分页效果
Nov 15 #Javascript
vue+Element-ui实现分页效果
Nov 15 #Javascript
vue实现抽屉弹窗效果
Nov 15 #Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 #Javascript
You might like
深入解析php中的foreach问题
2013/06/30 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
requireJS使用指南
2016/04/27 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python Pywavelet 小波阈值实例
2019/01/09 Python
pybind11在Windows下的使用教程
2019/07/04 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
.net工程师笔试题
2012/06/09 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
基层干部十八大感言
2014/01/19 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
工作检讨书500字
2014/10/19 职场文书
加强作风建设心得体会
2014/10/22 职场文书
2015年党员承诺书
2015/01/21 职场文书
苏州园林导游词
2015/02/03 职场文书
人事任命通知书
2015/04/21 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
催款函范文
2015/06/24 职场文书