找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

_Wake:新手入门攻略《一》视图与渲染,点击事件

作者:模板之家 2018-1-27 10:01 10025人关注

一:视图与渲染 1.组件使用 组件的使用非常简单,从开发者文档中可直接复制到 wxml 文件中 例: wxml文件: button type=primary 登陆按钮 /button 2.数据绑定,使用双花括号 {{}} ,在页面实例

一:视图与渲染

1.组件使用
组件的使用非常简单,从开发者文档中可直接复制到 wxml 文件中
例: wxml文件:

<button type="primary" > 登陆按钮 </button>
2.数据绑定,使用双花括号 {{}} ,在页面实例Page的 data中设置数据


	
data: {
        text : "登陆按钮"
}

<button type="primary" > {{text}} </button>

3.点击事件
1>组件标签中添加 bindtap (绑定-点击)
<button type="primary" bindtap="btnClick"> {{btnText1}} </button>
2>在页面实例Page中 添加方法


	
btnClick :function () {
        console.log("按钮被点击,打印日志")
        this.setData{ text : "登陆按钮已被点击"}
}

4.渲染标签
1>判断是否显示,true为显示,false不显示
<view wx:if="{{bool}}"> 1 </view>
<view wx:else > 2 </view>
2>循环


	
wx:for="{{data}}"      wx:for-itme="vo"(若不设置,默认为item)
<view wx:for="{{news}}" wx:for-item="a" wx:for-index="b">
{{a}} {{b}}
</view>

5.模版
方法1:
<include src="../templates/header" />
等同于复制模版文件中的代码,模版中直接使用页面中的变量

方法2:
设置模版:
<template name="footer1">模版1 - {{text}}</template>
模版引入:


	
<import src="../templates/footer />"
<template is="footer1" data="{{text : '给模版传的文本'}}"


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)