gitbhub項目地址:https://github.com/fancaixia/PagingView

頁面效果

001.PNG

頁面顯示的列對應(yīng)數(shù)組tags，若tags數(shù)組長度為2，則顯示兩列

002.png

引用頁面----activity_list

index.wxml

<view >
  <PagingView id="PagingView" tags = "{{tags}}" bind:fnClick="fnclick" selectedone = "{{selectedone}}">
  </PagingView>
</view>

<view class="page-body">
  <view class="page-section">
    <view class="activity_list_box" wx:if="{{selectedone == 1}}">
       進行中活動
    </view>
   <view class="activity_list_box" wx:if="{{selectedone == 2}}">
      已結(jié)束活動
    </view>
     <view class="activity_list_box" wx:if="{{selectedone == 3}}">
       待評價活動
    </view>
  </view>
</view>

**index.json

{
  "usingComponents": {
    "PagingView": "/components/PagingView/index"
  },
  "navigationBarTitleText": "活動管理"
}

index.js

Page({
  data: {
    tags: [
      { id: 1, name: "進行中活動" },
      { id: 2, name:"已結(jié)束活動"},
      { id: 3, name: "待評價活動" }
    ],
    selectedone:1,
  },
  onLoad(){

  },
  //鼠標(biāo)跟隨
  fnclick(e) {
    const ev = e.detail;
    this.setData({
      selectedone: ev.currentTarget.dataset.select
    })
    if (ev.currentTarget.dataset.select == 1) {
        console.log('點擊進行中回調(diào)')
    } else if (ev.currentTarget.dataset.select == 2) {
        console.log('點擊已結(jié)束回調(diào)')
    }else{
        console.log('點擊待評價回調(diào)')
    }

  },

})

組件 components/PagingView

index.wxml

<view class="header">
<scroll-view class="scroll-view_H" scroll-x="{{true}}">

       <view class="list">
            <view wx:for="{{tags}}" wx:key="{{index}}" style="width:{{100/(tags.length)}}%"  bindtap='fnclick' data-select="{{item.id}}" class="{{selectedone === item.id?'blue':''}}">{{item.name}}</view>
            
        </view>
  </scroll-view>
  <view  class="cur" style="left:{{(100/2/(tags.length))*(selectedone+(selectedone-1))}}%"></view>
 </view>

index.json

{
  "component": true,
  "usingComponents": {}
}

index.js

Component({

  properties: {
    tags:{
      type:Array,
      value:"表頭信息"
    },
    selectedone: {
      type: Number,
      value: "表頭信息"
    },
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
  },
  /**
   * 組件的方法列表
   */
  methods: {
    fnclick(e) {
      // 調(diào)用父組件  事件
      this.triggerEvent("fnClick", e);
    },
  }
})

index.wxss

Page{
  font-size: 28rpx;
}
.header{
  background: #fff;
  width: 100%;
 border-bottom: 1rpx solid #d9d9d9;
 position: relative;
}
.header .list view{
 line-height: 88rpx;
 display: inline-block;
 text-align: center;
color: #999;
}
.header .list view.blue{
  color: #007aff;
}
.header .cur{
  position: absolute;
  left:0%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100rpx;
  height: 6rpx;
  background: #007aff;
  transition: .5s all;
}