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

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

app.json

1

{<br>  "pages": [<br>    "pages/index/index"<br>  ],<br>  "window": {<br>    "navigationBarBackgroundColor": "#0149af",<br>    "navigationBarTitleText": "首页",<br>    "navigationBarTextStyle": "white"<br>  },<br>  "style": "v2",<br>  "sitemapLocation": "sitemap.json"<br>}<br> <br>pages/index/index.wxml<br><view class="cameraContainer"><br>  <view class="header"><br>    <input type="text" class="search" placeholder="搜一搜 这里啥都有"/><br>    <image src="/static/images/search.png"></image><br>  </view><br>  <view class="tabContainer"><br>    <scroll-view class="tabs" enable-flex scroll-x scroll-into-view="{{tabId}}" scroll-with-animation><br>      <view class="tab {{item.id===tabId?'active':''}}" wx:for="{{tabList}}" wx:key="id" <br>            id="{{item.id}}" bindtap="changeTab"><br>        {{item.name}}<br>      </view><br>    </scroll-view><br>  </view><br>  <view class="contentContainer"><br>    <view class="content" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="*this">{{content}}</view><br>  </view><br></view>

​ 

pages/index/index.wxss

1

cameraContainer{<br>  padding: 10rpx;<br>}<br>.header{<br>  display: flex;<br>  align-items: center;<br>  border: 1rpx solid #aaa;<br>  border-radius: 6rpx;<br>  padding: 6rpx 10rpx;<br>}<br>.header image{<br>  width: 36rpx;<br>  height: 36rpx;<br>  padding: 0 10rpx;<br>}<br>.header .search{<br>  flex: 1;<br>  height: 36rpx;<br>  line-height: 36rpx;<br>  font-size: 26rpx;<br>}<br>.tabContainer{<br>  margin-top: 20rpx;<br>}<br>.tabs{<br>  display: flex;<br>  height: 50rpx;<br>}<br>.tab{<br>  height: 40rpx;<br>  line-height: 40rpx;<br>  margin-right: 30rpx;<br>  white-space: nowrap;<br>  font-size: 28rpx;<br>}<br>.active{<br>  border-bottom: 4rpx solid #1a74f1;<br>}<br>.content{<br>  width: 100%;<br>  height: 600rpx;<br>  line-height: 600rpx;<br>  text-align: center;<br>  background:#eee;<br>  color: #1a74f1;<br>  font-size: 64rpx;<br>  border-radius: 10rpx;<br>  margin-bottom: 10rpx;<br>}<br>

pages/index/index.js

1

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

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