微信小程序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.动态加载同类数据

相关文章:
微信小程序5-图片实现点击动作和动态加载同类数据
搜索 微信小程序 “动物觅踪” 观看效果 感谢阅读,初学小白,有错指正。 一、功能描述 a. 原本想通过按钮加载背景图片,来实现一个可以点击的搜索button,但是遇到两个难点,一是按钮大小调整不方便(网上搜索…...
策略梯度定理公式的详细推导
策略梯度定理公式的详细推导 以下是策略梯度定理公式从基础概率公式到最终形式的完整推导,帮助更清晰地理解推导过程中的每一个步骤。 1. 策略梯度的目标 我们希望最大化期望累积奖励 ( J ( θ ) J(\theta) J(θ) ),其定义为: J ( θ ) E…...
力扣-图论-10【算法学习day.60】
前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程(例如想要掌握基础用法,该刷哪些题?)我的解析也不会做的非常详细,只会提供思路和一些关键点,力扣上的大佬们的题解质量是非…...
《Python WEB安全 库全解析》
《Python WEB安全 库全解析》 一、Python WEB安全 库概述二、常见的 Python WEB安全 库介绍1. Jiasule2. Awesome Python Security3. Flask-Security4. Flask-SeaSurf 三、Python WEB 安全库的优缺点1. 优点2. 缺点 四、Python WEB 安全库的使用场景1. 开发 Web 应用2. 处理敏感…...
Linux yum-config-manager命令异常
错误信息 使用 yum-config-manager命令时错误信息如下 sudo yum-config-manager \ > --add-repo \ > https://download.docker.com/linux/centos/docker-ce.repo sudo: yum-config-manager: command not found 解决办法 第一步: sudo yum -y install yum-u…...
ios 开发配置蓝牙
如果使用了蓝牙功能, 又没有配置, 会出现以下错误: This app has crashed because it attempted to access privacy-sensitive data without a usage description. The apps Info.plist must contain an NSBluetoothAlwaysUsageDescription key with a string value explaini…...
geoserver(1) 发布sql 图层 支持自定义参数
前提使用postgis 数据库支持关联 join 支持 in,not in,like,及其他sql原生函数 新增sql图层 编写自定义sql 编辑sql语句必须输出带有geom数据 正则表达式去除 设置id以及坐标参考系 预览sql图层效果 拼接sql参数 http://xxx.com/geoserver/weather/wms?SERVICEWMS&VERSI…...
Linux:network:添加ip的时候自动添加一个本地路由
文章目录 问题问题 最近在看一个路由的问题,顺便看内核代码,发现在添加IP的时候,内核会自动添加一个local route。 net/ipv4/devinet.c inet_rtm_newaddr->__inet_insert_ifa /* Send message first, then call notifier.Notifier will trigger FIB update, so thatlis…...
go 集成nacos注册中心、配置中心
使用限制 Go>v1.15 Nacos>2.x 安装 使用go get安装SDK: go get -u github.com/nacos-group/nacos-sdk-go/v2 快速使用 初始化客户端配置ClientConfig constant.ClientConfig{TimeoutMs uint64 // 请求Nacos服务端的超时时间,默…...
ssd202d-badblock-坏块检测
这边文章讲述的是坏快检测功能 思路: 1.第一次烧录固件会实现跳坏块,但是后续使用会导致坏块的产生; 于是我在uboot环境变量添加了两个变量来控制坏快 lb_badnum //坏块个数 lb_badoff //坏块所在位置 2.第一次开机会根据lb_badnum是否…...
MySQL-练习-数据介绍
文章目录 一. 数据介绍1. 数据结构2. 创建数据库,数据表3. 员工表(employees)练习1 4. 顾客表(customers)练习2 5. 商品(products)和商品类别(categories)表练习3 6. 供应商表(suppliers)练习4 7. 订单和订单明细表练习5 二. 数据汇总三. 使用CASE WHEN …...
React框架:解锁现代化Web开发的新维度
在当今前端开发领域,React 无疑是一颗璀璨的明星。React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库,它在前端开发中占据着重要的地位,为开发者提供了一种高效、灵活且可维护的方式来构建复杂的用户界面。 一、React 的背景与开…...
电阻功率,限流,等效电阻
1 电阻额定功率 2 电阻限流作用 3 电阻并联等效电阻...
Qt | 开发工具(top1)
Qt Creator 跨平台、完整的集成开发环境(IDE),供应用程序开发者创建用于多个桌面、嵌入式和移动设备平台的应用程序。 Qt Linguist 一套将Qt C和Qt Quick应用程序翻译成本地语言的工具。 qmake Qt自动化构建工具,简化了不同平台的构建过程。…...
Node.js express
1. express 介绍 express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架,官方网址:https://www.expressjs.com.cn/简单来说,express 是一个封装好的工具包,封装了很多功能,便于我们开发 WEB 应用ÿ…...
ios h5中在fixed元素中的input被focus时,键盘遮挡input (van-popup、van-feild)
问题描述: 前提:我使用的是vant组件库,其中一个页面中有一个van-popup组件,van-popup组件中又嵌套了一个van-field组件预期结果:当点击van-feild输入框时,键盘弹起,输入框显示在键盘上方实际结…...
springboot整合lua脚本在Redis实现商品库存扣减
1、目的 使用lua脚本,可以保证多条命令的操作原子性;同时可以减少操作IO(比如说判断redis对应数据是否小于0,小于0就重置为100,这个场景一般是取出来再判断,再存放进行,就至少存在2次IO,用lua脚…...
MySQL ON DUPLICATE KEY UPDATE影响行数
目录 分析为什么Updates返回7 总结 数据库更新日志如下 insertOrUpdateList|> Preparing: INSERT INTO clue_user_tag (vuid, tag_id, tag_type, content) VALUES (?, ?, ?, ?) , (?, ?, ?, ?) , (?, ?, ?, ?) , (?, ?, ?, ?) ON DUPLICATE KEY UPDATE …...
uniapp小程序 slot中无法传递外部参数的解决方案
最近在封装一个List组件,外部传给我数据,我循环后将每个Item部分slot到外部,由调用者自己去写item布局,类似ElementUI、iView的Tabe列表。 List: <view v-if"list.length > 0" class"list-scroll__item&quo…...
umi实现动态获取菜单权限
文章目录 前景登录组件编写登录逻辑菜单的时机动态路由页面刷新手动修改地址 前景 不同用户拥有不同的菜单权限,现在我们实现登录动态获取权限菜单。 登录组件编写 //当我们需要使用dva的dispatch函数时,除了通过connect函数包裹组件还可以使用这种方…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...
水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关
在水泥厂的生产流程中,工业自动化网关起着至关重要的作用,尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关,为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多,其中不少设备采用Devicenet协议。Devicen…...
跨平台商品数据接口的标准化与规范化发展路径:淘宝京东拼多多的最新实践
在电商行业蓬勃发展的当下,多平台运营已成为众多商家的必然选择。然而,不同电商平台在商品数据接口方面存在差异,导致商家在跨平台运营时面临诸多挑战,如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...
理想汽车5月交付40856辆,同比增长16.7%
6月1日,理想汽车官方宣布,5月交付新车40856辆,同比增长16.7%。截至2025年5月31日,理想汽车历史累计交付量为1301531辆。 官方表示,理想L系列智能焕新版在5月正式发布,全系产品力有显著的提升,每…...
