小程序~~1(组件+事件系统)

目录

1.组件

配置tabBar

项目配置文件

sitemap.json

image组件

text属性

页面跳转

背景图片的使用

2.事件系统

事件绑定和事件对象

事件分类以及阻止事件冒泡

事件传参

data-数据名 自定义数据

mark:数据名  自定义数据


1.组件

常见的配置文件

pages字段

配置tabBar

"color":  指的是底部栏的背景颜色

"borderStyle":  指的是底部栏上面的一条分割线,默认是"black",设置为"white"看不见

"position":  指的是底部栏放置的位置,可以放在上面但是不显示图标

项目配置文件

project.config.json   配置公共的设置

project.private.config.json   配置个人的设置

与最终编译结果有关的设置必须设置到project.config.json中

在project.config.json文件的setting方法中添加"useCompilerPlugins",这个属性值是一个列表,添加sass属性,并修改页面文件的wxss后缀名为scss;

sitemap.json

没有该属性就默认所有页面都能被索引

所有页面都能被索引,pages值是"*";不想被索引,action值为"disallow",再去设置不想被索引的页面;如果action值为allow,pages值不是*,而是某一个具体的页面,表示只有这一个页面能够被索引

image组件

mode属性  可以显示出图片的某一角,如top left或者top right等;aspectFill该属性值会保持图片的纵横比,即按短边来显示,另一边会进行截取,水平或者垂直方向仅有一处能显示完全;aspectFit该属性值能完全使图片显示出来

show-menu-by-longpress 长按图片显示菜单,如:下载、保存图片、分享给朋友等

lazy-load 图片懒加载,在滑动到一定距离后显示图片

 

text属性

user-select   长按选中文本,默认是true;只有text标签中才会生效,其它标签中不会生效

space   空格大小,属性值ensp是以中文字符空格一半大小来进行展示(大),属性值emsp是以中文字符空格大小进行展示的(中),属性值nbsp以字符大小来进行展示(小)

页面跳转

页面跳转需要用到navigation组件

url  放置要跳转到的页面的链接 前面要多加一个/

open-type 跳转方式,

  • navigate  保留当前页面(有返回箭头),跳转到应用内的某个页面,但是不能跳转到tabBar页面
  • redirect    关闭当前页面(没有返回箭头),跳转到应用内的某个页面,但是不能跳转到tabBar页面
  • switchTab  跳转到tabBar页面,并关闭其他所有非tabBar页面
  • reLaunch  关闭所有页面,打开应用内的某个页面
  • navigateBack  关闭当前页面,返回上一页面或者多级页面

在实现页面跳转的过程中可携带参数,路径和参数之间用?分隔,参数名和参数值之间用=连结,多个参数之间用&分隔

但是open-type="switchTab"时不支持传参

open-type="navigateBack" detal="1" 返回页面时,可以自定义一次想要返回的页面数值,默认是1

背景图片的使用

background-image:url()

图片不支持本地地址,可使用网络图片的网址(http开头),或者使用工具将图片转换成base64形式(代码冗长,不建议使用),再或者使用<image/>组件

2.事件系统

事件绑定和事件对象

bind:事件名

bind事件名

事件处理函数需要写到.js文件中,调用事件名来获得事件对象的值

其中搜索框的样式是需要自己来定义的,通过event.detail.value来获取搜索框的值

事件分类以及阻止事件冒泡

冒泡事件:当一个组件的事件被触发后,该事件会向父节点传递

使用bind绑定的事件会触发事件冒泡,想阻止事件冒泡,将bind换为catch

事件传参

data-数据名 自定义数据

使用data-方法传参的时候,多个单词由-连接,连字符写法会转换成驼峰写法;传参的时候,大写字符会转换成小写字符

返回的参数中,currentTarget指的是事件绑定者,而target是触发事件者,在获取参数的时候要注意对象

mark:数据名  自定义数据

使用mark:来传递参数,点击按钮会得到包括view的数据

  • 13
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值