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

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

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

一、功能描述

a. 原本想通过按钮加载背景图片,来实现一个可以点击的搜索button,但是遇到两个难点,一是按钮大小调整不方便(网上搜索也没有说明白的,去掉V2也是不能随意修改),二是图片放在按钮上位置调整也不方便(总是左侧或上面留白很多,图片还不能动态缩放)。,基于上面两个问题,最终我选择了直接使用图片,并且实现用户点击图片,触发响应的动作。

b. 我需要显示一个多条评论的界面。既不知道有多少条评论的情况下,动态加载评论数。

二、修改内容

先修改第一节中a功能

index.wxml修改

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

class:格式定义,我是在index.wxss添加了如下格式

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

src:图片路径,/res/search.png是绝对路径的方式

mode:是图片的显示格式,可以添加和去掉对比看

bindtap:是点击图片的时候,触发的回调函数。

index.js修改

javascript 复制代码
onSearchEvent: function () {
    // 你的函数具体功能代码
  },

onSearchEvent函数内应该实现你想要实现的功能, 我这里先随便显示一个可隐藏的输入文本框,就不写贴出详细代码了。(可隐藏可显示切换的页面可阅读《微信小程序3-显标记信息和弹框》里有详细介绍使用方式)。

修改第一节中b功能

index.wxml修改

html 复制代码
<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修改

javascript 复制代码
data: {
    infoBoxComment: []
}

添加infoBoxComment变量,可以看出这是一个变量集合,否则在index.wxml中无法使用for循环持续获取。

可以在任何你的代码逻辑中,使用infoBoxComment.push()的方式往里面添加成员。

三、展示效果

a.图片实现点击动作

b.动态加载同类数据

相关推荐
老华带你飞1 天前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞1 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗1 天前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张2 天前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师2 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪2 天前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图2092 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
fakaifa2 天前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_916007472 天前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa2 天前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店