《微信小程序模仿開眼視頻app(一)——視頻首頁、視頻詳情、分類》
《微信小程序模仿開眼視頻app(二)——搜索功能》
可到我的github賬號上去copy文件
瀑布流部分
文件代碼提示的挺詳細的,這里主要點一下
- 社區與分類:頁面左右滑動可自由切換,導航條下劃線也會動態變化,用的是swiper標簽,可具體查看微信官方解釋文檔,
只需要導航條下劃線的index屬型與swiper的index同步即可
- 瀑布流:用的外部api:https://api.apiopen.top/musicBroadcasting
他會截取到40條與圖片相關的信息,但是需要修改一些屬型,換成用戶信息卡需要的內容,當然了,如果你有自己的api就更好了,不需要那么麻煩。
然后在wxml中設置成兩列,按index奇偶排序,奇數在左,偶數在右,可以弄成參差排序。只要圖片彼此高度相差不大以及提前點開啟下拉刷新功能,應該‘看起來’還是算瀑布流吧(心虛`-`\\\)
網上有個方法是用
column-count: 2;
來弄,剛開始我也是這樣弄,很方便,但是后續便會發現它的排列情況是按左列排滿后再往右接著排,而不是一行排完接著下一行,如果有下拉刷新增加新內容的話...是的,你應該已經發現問題了。
我之前還想著直接算出左右兩列的高度,然后對比,誰短就把下一信息卡插進去,因為微信有提供節點信息接口,可以獲取到節點的高度,但是它會受css布局的影響(具體規則我也不大清楚……),我操作的時候有些節點能獲取到,有些則不然。而且還不準……總之試驗了很多次,還是放棄這個方法了
- 下拉刷新:打包好加載數據函數loadData(),每次scrollToLower就調用該函數
分類部分
分類主要也是數據的重復排布,所以想到了或許可以用json來保存數據;
但是在查閱一些資料后,發現微信小程序自帶的wxs好像也可以實現,就想著試試
//在utils/categoryData.wxs中
var list = [{id: '1',MTID: 'MT001',category: '#廣告',imageAddress: '../../images/4.jpg',},{id: '2',MTID: 'MT002',category: '#生活',imageAddress: '../../images/4.jpg',},{id: '3',MTID: 'MT003',category: '#動畫',imageAddress: '../../images/4.jpg',},{id: '4',MTID: 'MT004',category: '#搞笑',imageAddress: '../../images/4.jpg',},{id: '5',MTID: 'MT005',category: '#開胃',imageAddress: '../../images/4.jpg',},{id: '6',MTID: 'MT006',category: '#創意',imageAddress: '../../images/4.jpg',},{id: '7',MTID: 'MT007',category: '#運動',imageAddress: '../../images/4.jpg',},{id: '8',MTID: 'MT008',category: '#音樂',imageAddress: '../../images/4.jpg',},{id: '9',MTID: 'MT009',category: '#萌寵',imageAddress: '../../images/4.jpg',},
];module.exports = {list: list,
}
在wxml中排版
<!-->WXS(WeiXin Script)是小程序的一套腳本語言,結合 WXML,可以構建出頁面的結構。-->
<wxs src='../../utils/categoryData.wxs' module="tools" /><navigator class='searchPalce' url="../search/search"><image src='../../images/search.png' class='searchIcon'></image>
</navigator>
<scroll-view class="body" scroll-y="true"><view class="item" wx:for="{{tools.list}}"><view class='cover'><image src="{{item.imageAddress}}" mode='scaleToFill' class='pic'></image></view><text class="intro">{{item.category}}</text></view>
</scroll-view>
?
好的,總結完畢,有問題就轟炸我吧^u^