从0开始学习制作一个微信小程序 学习部分(6)组件与事件绑定

系列文章目录

学习篇第一篇我们讲了编译器下载,项目、环境建立、文件说明与简单操作:第一篇链接
第二、三篇分析了几个重要的配置json文件,是用于对小程序进行的切换页面、改变图标、控制是否能被搜索到等的操作第二篇链接、第三篇链接
第四五篇学习了框架、api组件:
第四篇链接:rpx和轮播图
第五章链接:文字组件和跳转组件
本篇会将组件讲完,并进入事件绑定的学习。


文章目录

  • 系列文章目录
  • 一、scroll-view组件图片滚动
    • 1.滚动代码
  • 二、background image背景图片
    • 1)框架
    • 2)scss
  • 三、事件绑定
    • 1)绑定方法
    • 2)处理函数
    • 3)返回函数实例
      • a)文本框教学
      • b)冒泡事件和非冒泡事件
      • c)问题实现


一、scroll-view组件图片滚动

1.滚动代码

<scroll-view class="scroll-x" scroll-x>
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>
.scroll-x{width: 100%;white-space: nowrap;background-color: yellowgreen;view{display: inline-block;width: 300rpx;height: 80rpx;&:last-child{background-color: red;      }&:first-child{background-color: blue;}}
}

在这里插入图片描述
可以实现横向拖动。scroll-x是横向移动,scroll-y是纵向移动。

二、background image背景图片

注意,背景图片不支持本地图片,只能由网络图片。

1)框架

<view class="bg_test">a</view>

2)scss

代码如下(示例):

.bg_test{height: 400rpx;background-image: url(data:image/gif;base64,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);   }

以上是使用了base64编码,这样可以有效的解决我们没有网络地址图片的困境。本地图片转base64格式工具
如果你由自己的网页、服务器,你可以上传图片到自己的网页,然后用网络图片地址。下面给吃一个例子
http://8.131.91.46:6677/bgimage.png
你可以将background换成

background-image: url(http://8.131.91.46:6677/bgimage.png);

在这里插入图片描述
可以实现背景图片。

三、事件绑定

1)绑定方法

先在框架文件wxml中添加botton绑定,有以下两种方式:

<view bind:tap="fnName"></view>
<view bindtap="fnName"></view>

例子:<button type="primary" size="mini" bind:tap="tap_test">绑定事件</button>

2)处理函数

在js中需要调用小程序提供的Page方法来注册小程序的页面,我们可以在js文件的page方法中创建事件处理函数。

   tap_test(){console.log('tap触发')},

在这里插入图片描述

在这里插入图片描述

3)返回函数实例

一个现实的问题:如果我们需要在点击按钮的时候获得文本框中的内容,怎么办 ?

a)文本框教学

由于文本框默认没有边框,我们先去app.scss中加入边框设置。

input{
border: 1px solid black;
}

然后去xwml框架中加入input输入框

<input type="text"  />

在这里插入图片描述
就显示出来啦~

再说说文本框的事件绑定

<input type="text"  bind:input="input_convey_test"  />

以上代码在wxml中

     input_convey_test(event){//为了获取值,我们需要引入eventconsole.log(event.detail.value)},

以上代码在.js文件中
console.log就是在console框中输出。
效果如下
在这里插入图片描述

在这里插入图片描述

b)冒泡事件和非冒泡事件

冒泡事件:子组件被触发,会触发父组件
非冒泡事件:子组件被触发,不会触发父组件
当我们这么写绑定的时候:<input type="text" catch:input="input_convey_test" />就不会触发父组件。
注意,默认为 冒泡事件。
currentTarget可以调取事件绑定者,target对应事件触发者

c)问题实现

xwml:

<view class="search-top"><input bind:input="inputCom" value="{{inputValue}}"></input><text bindtap="doSearch">搜索</text>
</view>

js:

Page({data: {// 存储输入框的值inputValue: ''},// input输入框的bindinput事件inputCom(e){this.setData({inputValue: e.detail.value})console.log(this.data.inputValue);},doSearch(){// 这里就可以使用输入框输入的值啦,通常我们在这里发起ajax请求会用到console.log('search:',this.data.inputValue);}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/6324.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows设置Redis为开机自启动

前言 Redis作为当前最常用的当前缓存技术&#xff0c;基本上Web应用中都有使用。所以&#xff0c;每次我们在本地启动项目前&#xff0c;都必须将Redis服务端启动&#xff0c;否则项目就会启动失败。但是&#xff0c;每次都要去启动Redis就很麻烦&#xff0c;有没有办法做到开…

Python爬虫--爬取糗事百科段子

爬取糗事百科段子&#xff1a; 段子在 <div class"content"> 里面的 <span> 标签里面 不过这里有个坑&#xff0c;div 标签跟 span 标签 之间有很多空行 普通 .*? 是匹配不了的&#xff0c;需要使用模式修饰符 S S 的意思 让 .(点) 匹配&#xff0c…

吴恩达2022机器学习专项课程(一)正则化(正则化成本函数正则化线性回归正则化逻辑回归)

目录 一.正则化1.1 正则化的好处1.2 正则化的实现方式 二.正则化改进线性回归的成本函数2.1 正则化后的成本函数的意义2.2 λ参数的作用2.3 不同λ对算法的影响2.4 为什么参数b没有正则化项 三.正则化线性回归的梯度下降3.1 为什么正则化可以在梯度下降迭代中减小w3.2 导数的计…

机器学习笔记-18

异常检测问题 异常检测虽然主要用于无监督学习问题上&#xff0c;但是和监督学习问题很相似。 异常检测(Anomaly Detection)&#xff1a;给定正确样本集{ x ( 1 ) , x ( 2 ) . . . x ( n ) x^{(1)},x^{(2)}...x^{(n)} x(1),x(2)...x(n)}&#xff0c;记新样本即要检测的样本为…

eNSP-抓包解析HTTP、FTP、DNS协议

一、环境搭建 1.http服务器搭建 2.FTP服务器搭建 3.DNS服务器搭建 二、抓包 三、http协议 1.HTTP协议&#xff0c;建立在FTP协议之上 2.http请求 3.http响应 请求响应报文参考&#xff1a;https://it-chengzi.blog.csdn.net/article/details/113809803 4.浏览器开发者工具抓包…

002-ChatGLM4接入Langchain

智谱AI GLM-4 新一代基座大模型GLM-4,整体性能相比GLM3全面提升60%,逼近GPT-4;支持更长上下文;更强的多模态;支持更快推理速度,更多并发,大大降低推理成本;同时GLM-4增强了智能体能力。 基础能力(英文):GLM-4 在 MMLU、GSM8K、MATH、BBH、HellaSwag、HumanEval等…

ubuntu搭建jupyter_notebook服务器

环境&#xff1a;ubuntu 22.04 目录 环境&#xff1a;ubuntu 22.04 一、创建一个anaconda用户 创建用户condaUser 为用户condaUser设置密码 开放opt文件夹的权限 登录condaUser用户 二、安装anaconda 下载anaconda 安装anaconda 三、添加环境变量 四、anaconda换源 …

【Unity Shader入门精要 第4章】数学基础(二)

1. Unity中的坐标空间 1.1 五个坐标空间 模型空间 模型自身的3D坐标系空间&#xff0c;左手坐标系是一个相对空间&#xff0c;坐标轴指向随模型旋转变化当物体有父节点时&#xff0c;Transform组件中各属性的值表示的即为该物体在其父物体的模型空间中的值当模型顶点传入顶点…

ARP防火墙能够为网络安全贡献什么样的力量

ARP防火墙&#xff08;Address Resolution Protocol Firewall&#xff09;作为网络安全的一环&#xff0c;起到保护网络免受ARP欺骗攻击的关键作用。今天德迅云安全给您介绍ARP防火墙的相关方面&#xff0c;帮助您深入了解和认识这一关键的安全措施。 网络安全对于现代社会的信…

「 网络安全常用术语解读 」SBOM主流格式CycloneDX详解

CycloneDX是软件供应链的现代标准。CycloneDX物料清单&#xff08;BOM&#xff09;可以表示软件、硬件、服务和其他类型资产的全栈库存。该规范由OWASP基金会发起并领导&#xff0c;由Ecma International标准化&#xff0c;并得到全球信息安全界的支持&#xff0c;如今CycloneD…

Java——认识异常

目录 一.异常的概念与体系结构 1.异常的概念 1.1算术异常 1.2数组越界异常 1.3空指针异常 2.异常的体系结构 3.异常的分类 3.1编译时异常 3.2运行时异常 二.异常的处理 1.防御式编程 1.1LBYL 1.2EAFP&#xff08;核心&#xff09; 2.异常的抛出 3.异常的捕获 3…

使用 ORPO 微调 Llama 3

原文地址&#xff1a;https://towardsdatascience.com/fine-tune-llama-3-with-orpo-56cfab2f9ada 更便宜、更快的统一微调技术 2024 年 4 月 19 日 ORPO 是一种新的令人兴奋的微调技术&#xff0c;它将传统的监督微调和偏好校准阶段合并为一个过程。这减少了训练所需的计算…

【深度学习】第二门课 改善深层神经网络 Week 2 3 优化算法、超参数调试和BN及其框架

&#x1f680;Write In Front&#x1f680; &#x1f4dd;个人主页&#xff1a;令夏二十三 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd; &#x1f4e3;系列专栏&#xff1a;深度学习 &#x1f4ac;总结&#xff1a;希望你看完之后&#xff0c;能对…

python实现验证码-图片类型

1 utils.py import randomdef get_random_code():code for i in range(5):# 随机生成大写字母upper_char chr(random.randint(65, 90))lower_char chr(random.randint(97, 122))num_char str(random.randint(0, 9))res random.choice([upper_char, lower_char, num_char]…

软件应用开发安全设计指南

1.1 应用系统架构安全设计要求 设计时要充分考虑到系统架构的稳固性、可维护性和可扩展性&#xff0c;以确保系统在面对各种安全威胁时能够稳定运行。 在设计系统架构时&#xff0c;要充分考虑各种安全威胁&#xff0c;如DDoS攻击、SQL注入、跨站脚本攻击&#xff08;XSS&…

如何使用 Node.js 开发一个文件上传功能?

在 Node.js 中实现文件上传功能可以通过多种方式完成&#xff0c;但其中最常用的方法之一是使用 Express 框架和 Multer 中间件。Express 是一个流行的 Node.js Web 框架&#xff0c;而 Multer 是一个用于处理文件上传的中间件。 步骤 1: 准备工作 首先&#xff0c;确保你已经…

《Fundamentals of Power Electronics》——升压隔离型变换器、SEPIC隔离型变换器

以下是升压型隔离变换器的相关知识点&#xff1a; 升压型隔离变换器可以通过互换降压型隔离变换器的电源与负载的位置得到。升压型隔离变换器有许多种结构&#xff0c;此处简短的讨论两种情况。这些转换器主要使用在高压电源和低谐波整流器中。 图6.36所示是一种全桥型电路结…

企业定制AI智能名片商城小程序:重塑营销场景,引领数字化营销新纪元

在数字化时代的浪潮中&#xff0c;多企业AI智能名片商城小程序以其独特的魅力和创新的功能&#xff0c;为消费者带来了前所未有的购物体验。它不仅是一个汇聚各类商品的购物平台&#xff0c;更是一个充满活力和创造力的社群生态。通过强化社群互动、鼓励用户生成内容以及引入积…

uniapp 文字转语音(文字播报、语音合成)、震动提示插件 Ba-TTS

简介&#xff08;下载地址&#xff09; Ba-TTS 是一款uniapp语音合成&#xff08;tts&#xff09;插件&#xff0c;支持文本转语音&#xff08;无服务费&#xff09;&#xff0c;支持震动提示。 支持语音合成&#xff0c;文本转语音支持震动&#xff08;可自定义任意震动效果…

一对一WebRTC视频通话系列(二)——websocket和join信令实现

本系列博客主要记录WebRtc实现过程中的一些重点&#xff0c;代码全部进行了注释&#xff0c;便于理解WebRTC整体实现。 一对一WebRTC视频通话系列往期博客&#xff1a; 一对一WebRTC视频通话系列&#xff08;一&#xff09;—— 创建页面并显示摄像头画面 websocket和join信令…