从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){
    //为了获取值,我们需要引入event
    console.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);
    }
})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

QT的TcpServer

Server服务器端 QT版本5.6.1 界面设计 工程文件&#xff1a; 添加 network 模块 头文件引入TcpServer类和TcpSocket&#xff1a;QTcpServer和QTcpSocket #include <QTcpServer> #include <QTcpSocket>创建server对象并实例化&#xff1a; /*h文件中*/QTcpServer…

基于SSM SpringBoot vue宾馆网上预订综合业务服务系统

基于SSM SpringBoot vue宾馆网上预订综合业务服务系统 系统功能 首页 图片轮播 宾馆信息 饮食美食 休闲娱乐 新闻资讯 论坛 留言板 登录注册 个人中心 后台管理 登录注册 个人中心 用户管理 客房登记管理 客房调整管理 休闲娱乐管理 类型信息管理 论坛管理 系统管理 新闻资讯…

Docker-Compose编排LNMP并部署WordPress

前言 随着云计算和容器化技术的快速发展&#xff0c;使用 Docker Compose 编排 LNMP 环境已经成为快速部署 Web 应用程序的一种流行方式。LNMP 环境由 Linux、Nginx、MySQL 和 PHP 组成&#xff0c;为运行 Web 应用提供了稳定的基础。本文将介绍如何通过 Docker Compose 编排 …

BUUCTF---misc---被偷走的文件

1、题目描述 2、下载附件&#xff0c;是一个流量包&#xff0c;拿去wireshark分析&#xff0c;依次点开流量&#xff0c;发现有个流量的内容显示flag.rar 3、接着在kali中分离出压缩包&#xff0c;使用下面命令&#xff0c;将压缩包&#xff0c;分离出放在out3文件夹中 4、在文…

Java -- (part21)

一.File类 1.概述 表示文件或者文件夹的路径抽象表示形式 2.静态成员 static String pathSeparator:路径分隔符:; static String separator:名称分隔符:\ 3.构造方法 File(String parent,String child) File(File parent,String child) Flie(String path) 4.方法 获…

在M1芯片安装鸿蒙闪退解决方法

在M1芯片安装鸿蒙闪退解决方法 前言下载鸿蒙系统安装完成后&#xff0c;在M1 Macos14上打开闪退解决办法接下来就是按照提示一步一步安装。 前言 重新安装macos系统后&#xff0c;再次下载鸿蒙开发软件&#xff0c;竟然发现打不开。 下载鸿蒙系统 下载地址&#xff1a;http…

Android使用kts上传aar到JitPack仓库

Android使用kts上传aar到JitPack 之前做过sdk开发&#xff0c;需要将仓库上传到maven、JitPack或JCenter,但是JCenter已停止维护&#xff0c;本文是讲解上传到JitPack的方式,使用KTS语法&#xff0c;记录使用过程中遇到的一些坑. 1.创建项目(library方式) 由于之前用鸿神的w…

每日OJ题_贪心算法二⑥_力扣409. 最长回文串

目录 力扣409. 最长回文串 解析代码 力扣409. 最长回文串 409. 最长回文串 难度 简单 给定一个包含大写字母和小写字母的字符串 s &#xff0c;返回 通过这些字母构造成的 最长的回文串 。 在构造过程中&#xff0c;请注意 区分大小写 。比如 "Aa" 不能当做一个…

【Java从入门到精通】Java继承

继承的概念 继承是java面向对象编程技术的一块基石&#xff0c;因为它允许创建分等级层次的类。 继承就是子类继承父类的特征和行为&#xff0c;使得子类对象&#xff08;实例&#xff09;具有父类的实例域和方法&#xff0c;或子类从父类继承方法&#xff0c;使得子类具有父…

Linux 麒麟系统安装

国产麒麟系统官网地址&#xff1a; https://www.openkylin.top/downloads/ 下载该镜像后&#xff0c;使用VMware部署一个虚拟机&#xff1a; 完成虚拟机创建。点击&#xff1a;“开启此虚拟机” 选择“试用试用开放麒麟而不安装&#xff08;T&#xff09;”&#xff0c;进入op…

React Native支持Tailwind CSS 语法

React Native支持Tailwind CSS 语法 一、前沿背景 回想下我们平时按照官方的规范进行书写样式是什么样&#xff1f; 是像下面这样&#xff1a; const MyComponent () > {return (<View><Text style{{ fontSize: 20 }}>开发者演示专用</Text></View…

【论文阅读】Tutorial on Diffusion Models for Imaging and Vision

1.The Basics: Variational Auto-Encoder 1.1 VAE Setting 自动编码器有一个输入变量x和一个潜在变量z Example. 获得图像的潜在表现并不是一件陌生的事情。回到jpeg压缩&#xff0c;使用离散余弦变换&#xff08;dct&#xff09;基φn对图像的底层图像/块进行编码。如果你给…

4 Spring AOP

目录 AOP 简介 传统开发模式 先来看一个需求 解决方案 AOP 图示 Spring 启用 AspectJ 基于 xml 配置 创建 pom.xml 创建 UserService 借口和 UserServiceImpl实现类 创建 LogAdvice 日志通知 创建 log4j.properties 重点&#xff1a;创建 spring-context-xml.xml 配…

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

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

Go语言基础语法(一):变量的声明与赋值

四种声明 变量声明 Go语言是静态类型语言&#xff0c;因此变量&#xff08;variable&#xff09;是有明确类型的&#xff0c;编译器也会检查变量类型的正确性。在数学概念中&#xff0c;变量表示没有固定值且可改变的数。但从计算机系统实现角度来看&#xff0c;变量是一段或…

Simulink|【免费】虚拟同步发电机(VSG)惯量阻尼自适应控制仿真模型

主要内容 该模型为simulink仿真模型&#xff0c;主要实现的内容如下&#xff1a; 随着风力发电、光伏发电等新能源发电渗透率增加&#xff0c;电力系统的等效惯量和等效阻尼逐渐减小&#xff0c;其稳定性问题变得越来越严峻。虚拟同步发电机&#xff08;VSG&#xff09;技…

win10部署本地大模型langchain+ollama

一、环境 windows10、Python 3.9.18、langchain0.1.9 二、ollama下载 Download Ollama on Windows 0.1.33版本链接https://objects.githubusercontent.com/github-production-release-asset-2e65be/658928958/35e38c8d-b7f6-48ed-8a9c-f053d04b01a9?X-Amz-AlgorithmAWS4-H…

ubuntu搭建node私库Verdaccio

ubuntu搭建node私库Verdaccio Verdaccio 是一个轻量级的私有 npm 代理注册服务器&#xff0c;它是开源的&#xff0c;可以帮助你设置和维护企业内部的 npm 包的存储库。使用 Verdaccio 可以让你完全控制包的发布流程、依赖关系以及访问策略。这篇文章将指导你如何在 Ubuntu 系…

SQL注入漏洞扫描---sqlmap

what SQLMap是一款先进的自动执行SQL注入的审计工具。当给定一个URL时&#xff0c;SQLMap会执行以下操作&#xff1a; 判断可注入的参数。判断可以用哪种SQL注入技术来注入。识别出目标使用哪种数据库。根据用户的选择&#xff0c;读取哪些数据库中的数据。 更详细语法请参考…

领域驱动设计(DDD)笔记(三)后端工程架构

文章链接 领域驱动设计(DDD)笔记(一)基本概念-CSDN博客领域驱动设计(DDD)笔记(二)代码组织原则-CSDN博客领域驱动设计(DDD)笔记(三)后端工程架构-CSDN博客前导 领域驱动设计(Domain Driven Design,简称DDD)是业内主导的业务工程理论。它在各中权威人士被广泛讨论…