微信小程序-事件绑定、样式引入、模板引用

绑定组件事件处理函数:bindtap
冒泡和不冒泡:bind时间绑定不会阻止冒泡事件,catch事件绑定可以阻止冒泡事件。
模板引用:import 在文件中使用目标文件定义的template,但是不会import目标文件中的import的template。
尺寸单位:rpx:750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素
css引用:@import “main.wxss”;

绑定组件事件处理函数:

bindtap

<view id="tap" data-hi="wechat" bindtap="tapName">点击</view>

Page({

tapName:function(event){

console.log(event)

}})

冒泡和不冒泡

bind时间绑定不会阻止冒泡事件,catch事件绑定可以阻止冒泡事件。

(bindtap/catchtap)

<view id="outter" bindtap="handletap1">

	outer view

	<view id="middle" catchatap="handletap2">

		middle view

		<view id="inner" bindtap="handltap3">

		inner view

		</view>

	</view>

</view>


/****************************************/

模板引用

wxml提供两种文件引用方式import、include

import 在文件中使用目标文件定义的template,但是不会import目标文件中的import的template。

main.wxml

<template name="main">
<p>main wxml{{main}}</p>
</template>

index.wxml

<import src="main.wxml"/>
<template is="main" data="{{main:'native'}}"/>

include可以将目标文件除了<template/>的整个代码引入。相当于拷贝到include位置上。
index.wxml


<include src="header.wxml"/>
<view>body</view>
<include src="footer.wxml"/>

***********WXSS*******************
扩展特性

尺寸单位:

rpx:750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素

1rem = (750/20)rpx



wxss导入wxss:@import

main.wxss


.h3{font-size:39px;}

index.wxss

@import "main.wxss";
.h5{color:#fff;}
内联样式:
<view style="color:{{color}};"/>

<view class="normaClass"/>

发表评论

邮箱地址不会被公开。 必填项已用*标注