微信小程序实现滚动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 相关文章推荐
JS backgroundImage控制
May 19 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
基于jquery的气泡提示效果
May 31 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
Vue 进阶之路(三)
Apr 18 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 代码优化之经典示例
2011/03/24 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
深入浅析Python字符编码
2015/11/12 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
如何更优雅地写python代码
2019/07/02 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python 字典访问的三种方法小结
2019/12/05 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
python使用smtplib模块发送邮件
2020/12/17 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
2015年大学生党员承诺书
2015/04/27 职场文书
公司董事任命书
2015/09/21 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python