微信小程序模仿開眼視頻app(三)——信息卡片瀑布流和分類

《微信小程序模仿開眼視頻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^

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/251354.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/251354.shtml
英文地址,請注明出處:http://en.pswp.cn/news/251354.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

PHP后臺代碼解決跨域問題

在前端里面&#xff0c;解決跨域的時候總顯得那么的惡心&#xff0c;什么jsonp啊&#xff0c;ajax啊&#xff0c;CORS啊什么的&#xff0c;總覺得是在鉆空子進行跨域&#xff0c;其實在PHP文件里面只需要加一段代碼就可以跨域了&#xff0c;前端你該怎么寫還是怎么寫&#xff0…

javascript --- typeof方法和instanceof方法

ES5中: 原始類型包括:Number、String、Boolean、Null、Undefined 原始封裝類型包括:Number、String、Boolean 引用類型包括:Array、Function、RegExp、Error、Date、Error 變量對象 原始類型的實例成為原始值,它直接保存在變量對象中. 引用類型的實例成為引用值,它作為一個指針…

python 基本數據類型常用方法總結

【引言】 python中基本數據類型的有很多常用方法&#xff0c;熟悉這些方法有助于不僅提升了編碼效率&#xff0c;而且能寫出高質量代碼&#xff0c;本文做總結 int .bit_length:返回二進制長度 str 切片索引超出不會報錯 切片上下限寫反不報錯&#xff0c;沒有結果 切片倒取&am…

網易試題——關于箭頭函數與this和arguments的關系

昨天做試題的時候遇到了這個題目 var a 1;function fn1() {console.log(this.a)}const fn2 () > {console.log(this.a)}const obj {a: 10,fn1: fn1,fn2: fn2}fn1()fn2()obj.fn1()obj.fn2() 哦這該死的網易&#xff0c;怎么出這么簡單的題目&#xff0c;答案是&#xff1…

《JavaScript 高級程序設計》筆記 第1~5章

第1章 js是專為網頁交互而設計的腳本語言&#xff0c;由3部分組成&#xff1a; ECMAScript&#xff0c;提供核心語言功能DOM文檔對象模型&#xff0c;提供訪問和操作網頁內容的方法和接口BOM瀏覽器對象模型&#xff0c;提供與瀏覽器交互的方法和接口 js是一種腳本語言、解釋…

【筆記】跨域重定向中使用Ajax(XHR請求)導致跨域失敗

背景&#xff1a; 1、前端Web中有兩個域名&#xff0c;a.com和b.com&#xff0c;其中a.com是訪問主站&#xff08;頁面&#xff09;&#xff0c;b.com是數據提交接口的服務器&#xff08;XHR請求&#xff09; 2、a.com中用XHR調用b.com/cerate【沒有指定協議】&#xff0c;保存…

javascript --- js中prototype、__proto__、[[Propto]]、constructor的關系

首先看下面一行代碼: function Person(name){this.name name; } var person1 new Person; console.log(person1.__proto__ Person.prototype); console.log(person1.constructor Person);控制臺打印如下: 可以看見,當使用構造函數(Person)構造一個實例(person1)時, 在后…

前端知識點整理收集(不定時更新~)

知識點都是搜集各種大佬們的&#xff0c;如有冒犯&#xff0c;請告知&#xff01; 目錄 原型鏈 New關鍵字的執行過程 ES6——class constructor方法 類的實例對象 不存在變量提升 super 關鍵字 ES6——...&#xff08;展開/收集&#xff09;運算符 面向對象的理解 關…

數據庫四大特性與隔離級別

數據庫四大特性ACID Atomicity (原子性) :事務&#xff08;transaction&#xff09;是由指邏輯上對數據的的一組操作&#xff0c;這組操作要么一次全部成功&#xff0c;如果這組操作全部失敗&#xff0c;是不可分割的一個工作單位。 Consistency(一致性) :在事務開始以前&#…

重學《JavaScript 高級程序設計》筆記 第6章對象

第6章 面向對象的程序設計 ECMAScript中沒有類的概念&#xff1b; 1.創建對象-歷史 1.1 創建實例&#xff0c;添加方法和屬性 → 對象字面量 缺點&#xff1a; 使用同一接口創建很多對象&#xff0c;產生大量重復代碼 var person new Object() person.name "Y" pe…

Java-reflect(反射)初步理解_1

27.01_反射(類的加載概述和加載時機) A:類的加載概述 當程序要使用某個類時&#xff0c;如果該類還未被加載到內存中&#xff0c;則系統會通過加載&#xff0c;連接&#xff0c;初始化三步來實現對這個類進行初始化。加載 就是指將class文件讀入內存&#xff0c;并為之創建一個…

javascrip --- 構造函數的繼承

兩點需要注意的. 第一是在構造函數聲明時,會同時創建一個該構造函數的原型對象,而該原型對象是繼承自Object的原型對象 // 聲明一個構造函數Rectengle function Rectangle(length, width) {this.length length;this.width width; }// 即:看見function 后面函數名是大寫,一般…

Ruby實例方法和類方法的簡寫

創建: 2017/12/12 類方法 Sample.func實例方法 Sample#func轉載于:https://www.cnblogs.com/lancgg/p/8281677.html

《JavaScript 高級程序設計》筆記 第7章及以后

第7章 函數表達式 匿名函數的name屬性是空字符串&#xff1b;閉包是函數&#xff1a;閉包是有權訪問另一個函數作用域中變量的函數&#xff1b;(P181 副作用,解釋了點擊li彈出循環最后值的原因)當某個函數第一次被調用時&#xff0c;會創建一個執行環境及相應作用域鏈&#xf…

[樹形dp] Jzoj P1046 尋寶之旅

Description 探險隊長凱因意外的弄到了一份黑暗森林的藏寶圖&#xff0c;于是&#xff0c;探險隊一行人便踏上了尋寶之旅&#xff0c;去尋找傳說中的寶藏。藏寶點分布在黑暗森林的各處&#xff0c;每個點有一個值&#xff0c;表示藏寶的價值。它們之間由一些小路相連&#xff0…

javascript --- 使用語法糖class定義函數

本文討論的是通過class聲明的函數,有什么特點,或者說是指向了哪里. class A() {} // A是一個類// 要看class聲明的函數指向哪里,只需將其[[Prototype]]屬性打印到控制臺,下面看看A和它的原型對象的指向 // 注:[[Prototype]]屬性通過__proto__訪問 console.log(A.__proto__…

前端知識點整理收集(不定時更新~)二

目錄 require() 加載文件機制 線程和進程 線程 單線程 Nodejs的線程與進程 網絡模型 初識 TCP 協議 三次握手 I/O I/O 先修知識 阻塞與非阻塞 I/O 同步與異步 I/O Git 基礎命令 分支操作 修改遠程倉庫地址 遠程分支獲取最新的版本到本地 拉取遠程倉庫指定分支…

SpringBoot零基礎入門指南--搭建Springboot然后能夠在瀏覽器返回數據

File->new Project 修改默認包名&#xff0c;根據自己的喜好修改 選擇初始化需要導入的包&#xff0c;盡量不要一開始就導入很多&#xff0c;特別是數據庫&#xff0c;不然啟動可能會有問題&#xff0c;創建好的目錄如下&#xff1a; 配置文件寫在application.properties下&…

JavaScript算法相關

1. 排序 1.1.冒泡排序 每一輪比較&#xff0c;從左至右交換相鄰&#xff0c;每輪結束&#xff0c;最后一個為最大下一輪&#xff0c;需要比較的個數 - 1 j < len - i (范圍動態縮小)共 len - 1 輪比較 function bubbleSort(arr) {var len arr.length;for (var i 1; i &…

javascript --- 編程風格

字符串 const a foobar; const b foo${a}bar; // 此處是反引號(tab鍵上) const c foobar;解構賦值 const [first, second] arr;function getFullName({ firstName, lastName }) { }function processInput(input) {return { left, right, top, bottom }; } const { left…