微信小程序5-图片实现点击动作和动态加载同类数据

搜索 微信小程序 “动物觅踪” 观看效果

感谢阅读，初学小白，有错指正。

一、功能描述

        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.动态加载同类数据