个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章微信小程序实现滚动Tab选项卡由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

最终效果如上。问题:

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

1、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拿到当前页 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
< 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 >

2、js部分 。

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
})

3、wxss样式 。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/Sophie_U/article/details/71745125 。

最后此篇关于微信小程序实现滚动Tab选项卡的文章就讲到这里了,如果你想了解更多关于微信小程序实现滚动Tab选项卡的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： Java的Synchronized关键字学习指南(全面 & 详细)
文章推荐： SpringBoot+Mybatis实现登录注册的示例代码
文章推荐： Spring Data JDBC介绍及实现代码
文章推荐： 分享我的第一次java Selenium自动化测试框架开发过程
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com