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

发布于:2024-05-04 ⋅ 阅读:(236) ⋅ 点赞:(0)

系列文章目录

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



一、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);
    }
})