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

绑定组件事件处理函数:

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"/>

微信小程序scroll-view隐藏滚动条方法

微信小程序scroll-view隐藏滚动条方法

在wxss里加入以下代码:

::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}

微信小程序 文本换行
实现转义/n 换行符

微信小程序<text>和<view>标签并不能让文本自动换行,
微信小程序也不支持 <br/>换行,很纠结。

处理方法:
替换<br/>标签 为 \n
使用 css 属性 :white-space:pre-wrap 

<view style=”white-space:pre-wrap”>
文本保留空格和回车 
</view>