搜索 微信小程序 “動物覓蹤” 觀看效果

感謝閱讀，初學小白，有錯指正。

一、功能描述

? ? ? ? a. 原本想通過按鈕加載背景圖片，來實現一個可以點擊的搜索button，但是遇到兩個難點，一是按鈕大小調整不方便（網上搜索也沒有說明白的，去掉V2也是不能隨意修改），二是圖片放在按鈕上位置調整也不方便（總是左側或上面留白很多，圖片還不能動態縮放）。，基于上面兩個問題，最終我選擇了直接使用圖片，并且實現用戶點擊圖片，觸發響應的動作。

? ? ? ? b. 我需要顯示一個多條評論的界面。既不知道有多少條評論的情況下，動態加載評論數。

二、修改內容

? ? ? ? 先修改第一節中a功能

????????index.wxml修改

????????<image?class="search_img"?src="/res/search.png"?mode="aspectFit"?bindtap="onSearchEvent"></image>

????????class：格式定義，我是在index.wxss添加了如下格式

.search_img{width: 50rpx;height: 30rpx;bottom: 45%;margin-left: 0;position: absolute;
}

?????????src：圖片路徑，/res/search.png是絕對路徑的方式

????????mode：是圖片的顯示格式，可以添加和去掉對比看

????????bindtap：是點擊圖片的時候，觸發的回調函數。

? ? ? ? ?index.js修改

onSearchEvent: function () {// 你的函數具體功能代碼},

????????onSearchEvent函數內應該實現你想要實現的功能，?我這里先隨便顯示一個可隱藏的輸入文本框，就不寫貼出詳細代碼了。（可隱藏可顯示切換的頁面可閱讀《微信小程序3-顯標記信息和彈框》里有詳細介紹使用方式）。

????????

? ? ? ? 修改第一節中b功能

? ? ? ? index.wxml修改

<view wx:for="{{infoBoxComment}}" wx:key="*this"><text>{{item["info"]}}</text>
</view>

? ? ? ? 這是個for循環，每次從list變量infoBoxComment里獲取一個成員（下面會在index.js中添加該變量）

????????wx:for：是變量名

????????wx:key：是索引方式，可以修改成idex，隨著循環次數累加。

????????item["info"]：是每一次從list變量infoBoxComment中獲取到的其中一個變量，這里固定用item表示，其中"info"是變量里我自己定義的成員名字，是個字符串。

? ? ? ? 整個循環直到infoBoxComment取出最后一個變量停止跳出

? ? ? ? index.js修改????????

data: {infoBoxComment: []
}

? ? ? ? 添加infoBoxComment變量，可以看出這是一個變量集合，否則在index.wxml中無法使用for循環持續獲取。

? ? ? ? 可以在任何你的代碼邏輯中，使用infoBoxComment.push()的方式往里面添加成員。

三、展示效果

? ? ? ? a.圖片實現點擊動作

????????

????????b.動態加載同類數據