直播原始碼,實現內容列表的豎向滑動
直播原始碼,實現內容列表的豎向滑動
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:'' }, onLoad(){ 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(){ this.setData({ tabList:result, tabId:result.length && result[0].id || '', content:result.length && result[0].name || '' }) } })
以上就是 直播原始碼,實現內容列表的豎向滑動,更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2927125/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 視訊直播原始碼,新增內容滑動條,停止滑動時隱藏原始碼
- 直播APP原始碼實現直播流程上需要注意的內容APP原始碼
- 直播平臺原始碼,頂部標籤欄及內容列表的設計與實現原始碼
- 論移動裝置內容的橫向滾動和豎向滾動
- 線上直播系統原始碼,flutter 巢狀滑動實現原始碼Flutter巢狀
- 影片直播app原始碼,vue實現列表自動滾動的方式APP原始碼Vue
- 直播系統app原始碼,自定義中間向兩邊滑動的滑動條APP原始碼
- 手機直播原始碼,實現圖片瀑布流式滑動效果原始碼
- 直播系統原始碼,圖片一直滾動,迴圈滾動,豎向和橫向原始碼
- 影片直播app原始碼,純css實現橫向滾動APP原始碼CSS
- 直播平臺原始碼,純JS實現左右滑動輪播圖原始碼JS
- 直播原始碼網站,實現對話方塊的左滑動刪除原始碼網站
- 從原始碼來看ItemTouchHelper實現RecyclerView列表的拖拽和側滑原始碼View
- 短視訊直播原始碼,拖動滑塊實現圖片驗證效果原始碼
- 手機直播原始碼,使用ViewPager2實現頁面滑動切換原始碼Viewpager
- 帶貨直播原始碼,確定ViewPager滑塊滑動方向原始碼Viewpager
- iOS 可以縱向橫向滑動的表格實現iOS
- jquery實現的豎向動態柱狀條效果jQuery
- 用ListView簡單實現滑動列表View
- app直播原始碼,flutter Text自動計算文字內容的寬度APP原始碼Flutter
- 成品直播原始碼,點選滑動切換效果原始碼
- 線上直播系統原始碼,滾動式內容展示控制元件原始碼控制元件
- 成品直播原始碼,實現在平臺內部的搜尋原始碼
- html裡列表滑動刪除的實現如此簡單HTML
- 實現 UITableViewCell 側滑操作列表UIView
- 直播電商原始碼,簡述直播的實現原理原始碼
- 直播app開發,滑動式的頂部導航欄(左右橫向滑動)APP
- 直播平臺開發,自定義中間向兩邊滑動的滑動條
- 直播平臺原始碼,迴圈滾動RecyclerView的實現原始碼View
- 利用jquery實現的向指定元素追加指定內容jQuery
- 直播系統原始碼,ViewPager載入大圖 左右滑動原始碼Viewpager
- 直播商城原始碼,隱藏iframe捲軸,並禁止滑動原始碼
- 直播平臺搭建原始碼,qt自定義滑動按鈕原始碼QT
- 影片直播原始碼,前端canvas動態驗證碼實現原始碼前端Canvas
- 視訊直播app原始碼,將內容推薦給平臺內的好友APP原始碼
- 線上直播系統原始碼,進入新的介面後自動重新整理內容原始碼
- 為了直播流暢,實現直播商城原始碼的轉碼原始碼
- 直播系統原始碼,vue實現無縫滾動原始碼Vue