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

news/2024/12/15 21:45:14/

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

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

一、功能描述

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


http://www.ppmy.cn/news/1555417.html

相关文章

【第二节】docker应用系列篇: docker运行单机mysql

系列文章目录 【第一节】docker应用系列篇&#xff1a; docker运行单机mysql 系列文章目录前言一、 docker运行mysql容器二、 客户端访问mysql 前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、 docker运行mysql容器 docker run -p 3306:3306 …

C# 探险之旅:第二十三节 - 字符(char):字符小精灵的独舞

嘿&#xff0c;探险家们&#xff01;欢迎再次踏上C#王国的奇妙旅程。这一节里&#xff0c;我们要深入探索一个非常基础但又极其重要的角色——字符(char)。想象一下&#xff0c;你正在参加一场由单个字母和数字组成的精灵舞会&#xff0c;每个精灵都代表着一个独特的字符。让我…

内网穿透讲解

什么是内网穿透 内网穿透是一种网络技术&#xff0c;它允许外网或者其他局域网的用户来访问这个局域网的服务器资源&#xff0c;让资源的利用率更高&#xff0c;更加灵活&#xff0c;但是也要确保网络安全。 工作原理 如果你在公司&#xff0c;但是你需要使用到你家里的那台电…

CMake简单使用(一)

目录 一、Linux下安装CMake1.1 源码安装1.2 初体验 二、CMake Language2.1 message打印2.2 变量的操作 set list2.2.1 Set 方法2.2.2 List 方法 三、CMake 流程控制3.1 if 条件3.1.1 基本语法3.1.2 常用的条件判断3.1.3 组合条件 3.2 loop 循环3.2.1. foreach 循环基本语法基本…

基于STM32的火灾烟雾报警器Proteus仿真设计(仿真+程序+设计报告+讲解视频)

基于STM32的火灾烟雾报警器Proteus仿真设计 1.主要功能2.仿真3. 程序4. 设计报告5. 资料清单 基于STM32的火灾烟雾报警器Proteus仿真设计(仿真程序设计报告讲解视频&#xff09; 仿真图proteus 8.9 程序编译器&#xff1a;keil 5 编程语言&#xff1a;C语言 设计编号&#x…

Axure高保真数据可视化大屏图表组件库

推出了一款高保真数据可视化大屏图表组件库&#xff0c;旨在为用户提供丰富的图表类型&#xff0c;使数据呈现更加直观、生动。本文将详细介绍该组件库中的各类图表元件&#xff0c;包括面积图、折线图、柱状图、条形图、圆环图、雷达图、仪表图以及综合类图表&#xff0c;以满…

7-8 整型关键字的散列映射

给定一系列整型关键字和素数 p&#xff0c;用除留余数法定义的散列函数 H(key)key%p 将关键字映射到长度为 p 的散列表中。用线性探测法解决冲突。 输入格式: 输入第一行首先给出两个正整数 n&#xff08;≤1000&#xff09;和 p&#xff08;≥n 的最小素数&#xff09;&…

【ZYNQ开发】Vitis下保存与快速加载BSP配置的方法

在使用Xilinx的Vitis进行ZYNQ PS端开发时&#xff0c;常常涉及到对于BSP的设置&#xff0c;比较典型的像是使用lwip时&#xff0c;需要对DHCP、memory以及send_buffer等进行一些自定义的修改。在设计到硬件描述文件需要进行更换&#xff08;PL端更改程序&#xff09;重新加载工…