直播app系统源码，使用scroll-view实现内容列表的竖向滚动

直播app系统源码，使用scroll-view实现内容列表的竖向滚动

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 scroll-into-view="{{tabId}}" scroll-with-animation>
      <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 class="contentContainer">
    <view class="content" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="*this">{{content}}</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;
  height: 50rpx;
}
.tab{
  height: 40rpx;
  line-height: 40rpx;
  margin-right: 30rpx;
  white-space: nowrap;
  font-size: 28rpx;
}
.active{
  border-bottom: 4rpx solid #1a74f1;
}
.content{
  width: 100%;
  height: 600rpx;
  line-height: 600rpx;
  text-align: center;
  background:#eee;
  color: #1a74f1;
  font-size: 64rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}
 

pages/index/index.js

Page({
  data:{
    tabList:[],
    tabId:'',
    content:''
  },
  onl oad(){
    this.getDataFromServer();
  },
  changeTab(e){
    const tabId = e.target.id;
    const tabObj = this.data.tabList.length && this.data.tabList.find(item => item.id === tabId) || {name:""}
     this.setData({tabId,content:tabObj.name})
  },
  getDataFromServer(){
    let result = [
      {"id": "tab_1","name": "美食"},
      {"id": "tab_2","name": "健身"},
      {"id": "tab_3","name": "电影"},
      {"id": "tab_4","name": "酒店"},
      {"id": "tab_5","name": "景点"},
      {"id": "tab_6","name": "超市",},
      {"id": "tab_7","name": "水果"},
      {"id": "tab_8","name": "生鲜"},
      {"id": "tab_9","name": "烟酒"},
      {"id": "tab_10","name": "买药",},
      {"id": "tab_11","name": "培训"},
      {"id": "tab_12","name": "养车"},
      {"id": "tab_13","name": "家居"},
      {"id": "tab_14","name": "宠物"},
      {"id": "tab_15","name": "游戏"}
    ]
    this.setData({
      tabList:result,
      tabId:result.length && result[0].id || '',
      content:result.length && result[0].name || ''
    })
  }
})

 以上就是 直播app系统源码，使用scroll-view实现内容列表的竖向滚动，更多内容欢迎关注之后的文章