微信小程序模仿開眼視頻app（一）有介紹首頁、視頻詳情和分類部分

可到我的github賬號上去copy文件

搜索部分

一開始沒想要設置歷史記錄啊、熱門搜索啊這些的，只是想把搜索框弄好看一點，無意中發現了微信官方ui庫：weui

里面有很多現成的例子可以參考，如他的搜索框如下效果：

?我覺得可以是可以，但是太死板了我覺得，于是我想修改成有些過渡效果

后來弄成了這樣

不知道你們看不看得清除過渡效果……就是 當點擊input時，搜索圖標會過渡到最左邊，當點擊其他部分時恢復原狀；

把css中的left值設置成動態就行了

<icon class="weui-icon-search_in-box" style='left:{{left}}px' type="search" size="14"></icon>

?而點擊后出現的搜索詳情是參考wxSearch-微信小程序優雅的搜索框

?是的，代碼特別有用，然后我增加了刷新和展開收起

?

//初始化keys值，越多越好 
WxSearch.init(that, 43, ['weappdev', '小程序', 'wxParse', 'wxSearch', 'wxNotification', 'besu', 'hhahaha', 'Selina', '55555', 'what you', 'goodforyou', 'heyguy']);

//刷新函數
function refresh(that) {var keysOri = keysInit.slice(0);//深拷貝var keysRan = [];var temData = that.data.wxSearchData;var keysNum = keysInit.length / 2;//隨機抽取關鍵字for (var i = 0; i < keysNum; i++) {var j = getRandomInt(0, keysOri.length);keysRan.push(keysOri[j]);keysOri.splice(j, 1);}temData.keys = keysRan;temData.rotate = 360 * n;n++;that.setData({wxSearchData: temData})
}

?

?關鍵值展示時是取你初始化keys關鍵值的數目的一半，而且是隨機展示；刷新時應該是要先排除掉已經展示了的值，在剩下的值中再隨機抽值的，但是考慮到我的keys的數目很少，就沒有執行“先排除掉已經展示了的值”這個功能了，直接在keys數組中抽取隨機索引了，哭了……這很不刷新啊……對不起大家（哭泣）

展示時用了在深拷貝原始keys中先排除掉已展示的，剩下的再與展示數組合并，收起則刪除掉增加的數組

?

//展開或者收起
function arrowforward(that) {var temData = that.data.wxSearchData;temData.arrow = temData.arrowNum * 180;//旋轉角度temData.arrowNum++;var keysOri = keysInit.slice(0);var keysOriNum = keysOri.length;if(temData.keys.length<keysInit.length){//判斷是收起狀態temData.arrowHeight=160;//重置css高度for(var i=0;i< temData.keys.length;i++){removeByValue(keysOri, temData.keys[i]);//先移除掉已展示的值}temData.keys = temData.keys.concat(keysOri);//兩數組合并連接，concat 會返回值，需要載體去承接}else{//否則是展開狀態temData.arrowHeight = 80;temData.keys.splice(-keysOriNum/2,keysOriNum/2);//移除掉后一半，keys最好是偶數……}that.setData({wxSearchData: temData})
}

?老實說，因為這個小項目是自己之前想試著做一做的，但因為期間有學業壓力暫停了幾個星期，然后也是這幾天才開始補充搜索頁面的功能，之前在搞其他功能的時候參考了好多大神的資料，也感悟了好多，但是！因為沒有養成即時記錄的習慣，我現在大概都忘了！（藍瘦），所以這篇博文我也只是將我自己增加的一些小功能寫進去了，很多參考其他資料的代碼我也沒過多敘述（想敘述也忘得差不多了……），希望大家自己去好好理解一下他們大神的代碼，強化自己的代碼編寫能力！

好的，接下來是《微信小程序模仿開眼視頻app（三）——信息卡片瀑布流和分類》

如果有不懂得可以在評論區寫出來哦，我也會繼續完善我的代碼，希望大家多多包涵我這只小白，謝謝！

?