使用scroll-view实现tabs

小程序项目

代码涉及的主要文件有：

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. pages/index/index.js

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxml

<view class="cameraContainer">
  <view class="header">
    <input type="text" class="search" placeholder="搜一搜 这里啥都有"/>
    <image src="/static/images/search.png"></image>
  </view>
  <view class="tabContainer">
    <scroll-view class="tabs" enable-flex scroll-x>
      <view class="tab {{item.id===tabId?'active':''}}" wx:for="{{tabList}}" wx:key="id" 
            id="{{item.id}}" bindtap="changeTab">
        {{item.name}}
      </view>
    </scroll-view>
  </view>
</view>

pages/index/index.wxss

.cameraContainer{
  padding: 10rpx;
}
.header{
  display: flex;
  align-items: center;
  border: 1rpx solid #aaa;
  border-radius: 6rpx;
  padding: 6rpx 10rpx;
}
.header image{
  width: 36rpx;
  height: 36rpx;
  padding: 0 10rpx;
}
.header .search{
  flex: 1;
  height: 36rpx;
  line-height: 36rpx;
  font-size: 26rpx;
}
.tabContainer{
  margin-top: 20rpx;
}
.tabs{
  display: flex;
}
.tab{
  height: 40rpx;
  line-height: 40rpx;
  margin-right: 30rpx;
  white-space: nowrap;
  font-size: 28rpx;
}
.active{
  border-bottom: 4rpx solid #0149af;
}

pages/index/index.js

Page({
  data:{
    tabList:[],
    tabId:''
  },
  onLoad(){
    this.getDataFromServer();
  },
  changeTab(e){
    const tabId = e.target.id;
    this.setData({tabId})
  },
  getDataFromServer(){
    let result = [
      {"id": "58100","name": "现场"},
      {"id": "60100","name": "翻唱"},
      {"id": "1101","name": "舞蹈"},
      {"id": "259129","name": "超燃联盟"},
      {"id": "254120","name": "滚石唱片行"},
      {"id": "1000","name": "MV",},
      {"id": "2100","name": "生活"},
      {"id": "2103","name": "游戏"},
      {"id": "1103","name": "萌宠"},
      {"id": "9102","name": "演唱会",},
      {"id": "57105","name": "粤语现场"},
      {"id": "59101","name": "华语现场"},
      {"id": "57106","name": "欧美现场"},
      {"id": "57108","name": "流行现场"},
      {"id": "57109","name": "民谣现场"}
    ]
    this.setData({
      tabList:result,
      tabId:result.length && result[0].id || ''
    })
  }
})

相关链接

1. 滑块视图的实现
2. 使用scroll-view实现滑块视图可能遇到的问题及其解决方法
3. 微信小程序中给event对象传递数据
4. flex布局：flex-basic flex-grow flex-basis