An example analysis of how to realize left and right sliding switching in WeChat applet scrolling tab-Mini Program Development-php.cn

An example analysis of how to realize left and right sliding switching in WeChat applet scrolling tab

黄舟

Release： 2017-09-12 10:07:48

Original

5068 people have browsed it

This article mainly introduces the relevant information on the WeChat applet scrolling Tab to achieve left and right sliding switching. Here are implementation examples to help you realize such a function. Friends in need can refer to

WeChat The mini program scrolls the Tab to realize left and right sliding switching.

Effect:

The final effect is as above. Problem:

1. There are 8 tab titles in total, so they cannot be displayed on one screen.
2. When the tab content area slides left and right to switch, the tab title will be marked (active) immediately.
3. When the active title is not displayed on the current screen, it must be displayed on the current screen.

1. wxml structure

The tab titles are eight in a row, so the scroll-view component is used to make them scrollable horizontally.

The tab content can be switched left and right by sliding, using the swiper component.

In order to be lazy, the data is repeated through wx:for traversal.

Instructions:

1. Setting the data-current attribute is used to: when the current item is clicked, the target value of the click is obtained by processing e.dataset.current in the click event swichNav.
2. The current component of the swiper component is used to control which page is currently displayed
3. The swiper component binds the change event switchTab, and gets the current page through e.detail.current

<view >
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
    <view class="tab-item {{currentTab==0?&#39;active&#39;:&#39;&#39;}}" data-current="0" bindtap="swichNav">健康</view>
    <view class="tab-item {{currentTab==1?&#39;active&#39;:&#39;&#39;}}" data-current="1" bindtap="swichNav">情感</view>
    <view class="tab-item {{currentTab==2?&#39;active&#39;:&#39;&#39;}}" data-current="2" bindtap="swichNav">职场</view>
    <view class="tab-item {{currentTab==3?&#39;active&#39;:&#39;&#39;}}" data-current="3" bindtap="swichNav">育儿</view>
    <view class="tab-item {{currentTab==4?&#39;active&#39;:&#39;&#39;}}" data-current="4" bindtap="swichNav">纠纷</view>
    <view class="tab-item {{currentTab==5?&#39;active&#39;:&#39;&#39;}}" data-current="5" bindtap="swichNav">青葱</view>
    <view class="tab-item {{currentTab==6?&#39;active&#39;:&#39;&#39;}}" data-current="6" bindtap="swichNav">全部</view>
    <view class="tab-item {{currentTab==7?&#39;active&#39;:&#39;&#39;}}" 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>

Copy after login

2. JS part

When the WeChat applet is developed, I personally feel it is quite similar to Vue, which uses data to drive the update of the view. Therefore, in small programs, you cannot directly operate the DOM, and of course you cannot use libraries such as 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
})

Copy after login

3. wxss style

.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%;}

Copy after login

The above is the detailed content of An example analysis of how to realize left and right sliding switching in WeChat applet scrolling tab. For more information, please follow other related articles on the PHP Chinese website!