目录
数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
简单绑定
数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:
例子:调用data数据
在JavaScript中:
data: {
name:"赵丽颖",
arr:["杨晨","司徒"],
}
在WXML中调用JavaScript中的data数据
<view wx:if="{{isFlag}}"> {{name}} </view>
<view wx:if="{{isFlag}}"> {{arr[0]}} {{arr[1]}} </view>
运行结果:
例子:设置隐藏,通过wx:if方式
JavaScript中:
data: {
name:"赵丽颖",
arr:["杨晨","司徒"],
arr1: ["a", "b","c","d"],
obj:{
name:"哦哦",
age:40
},
active:"kkkk",
isFlag:true,
num:0
},
//自定义的隐藏方法
closeHandle:function(){
console.log("点击")
console.log(this.data.isFlag)
// 更改一个值并渲染到页面,不能用this.data直接更改
// this.data.isFlag = false
this.setData({
isFlag:false
})
},
//自定义的显示方法
openHandle:function(){
this.setData({
isFlag:true
})
},
//自定义的点击显示和隐藏的切换方法
changeHandle:function(){
this.setData({
isFlag:!this.data.isFlag
})
},
在WXML中
<view wx:if="{{isFlag}}"> {{name}} </view>
<view wx:if="{{isFlag}}"> {{arr[0]}} {{arr[1]}} </view>
<view class='{{ active }}' wx:if="{{isFlag}}"> {{ obj.name }} {{ obj.age }}</view>
<!-- 绑定事件 bindtap
wx:if="true"
-->
<view wx:if="{{isFlag}}">看是否隐藏</view>
<!-- 绑定事件:bindtap="事件处理函数" 事件处理函数在js中-->
<view class='img' wx:if="{{isFlag}}">
<image src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7b2063a4f85d95b37ec3a061c47b9c1.jpg?thumb=1&w=358&h=252'></image>
</view>
<!-- <view > {{num}} </view> -->
<view class='f1'>
<button bindtap='closeHandle'>隐藏</button>
<button bindtap='openHandle'>显示</button>
<button bindtap='addHandle'>增加 </button>
<button bindtap='changeHandle'>点击切</button>
</view>
运行效果:
例子:wx:for方式用索引去获取数组中的数据
wx:for会根据数组的数量自动生成标签数量
WXML中代码:
<!-- 将循环执行数组中值,item是数组中的值,index是索引 -->
<view wx:for="{{ arr }}">{{ item }}</view>
<view wx:for="{{ arr1 }}">{{index}}----{{ item }}</view> -->
<!-- data-变量名 data-index -->
<view bindtap='ch'>
<view wx:for="{{ arr1 }}" data-index='{{index}}'>{{item}}</view>
</view>
JavaScript中:
data: {
arr:["杨晨","司徒"],
arr1: ["a", "b","c","d"],
},
ch:function(e){
console.log(e.target.dataset.index)
console.log(e)
}
运行结果:
运算
三元运算
一开始将flag的值设置true或false效果
<view hidden="{{flag}}"> Hidden </view>
data: {
flag:false
},
现在使用三元运算的方式,效果是相同的
<view hidden="{{flag ? true : false}}"> Hidden </view>
算术运算
a=5,b=8,c=10
<view>{{a + b}} + {{ c }} + {{ 1+3 }}</view>
data: {
a:5,
b:8,
c:10
},
逻辑运算
length>5为false
<view wx:if="{{length > 5}}">aaaaaaaaa </view>
data: {
length:3
},
运行结果:
length>5为true
data: {
length:30
},
运行结果:
样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,使用;表示语句结束
需要使用相对路径
导入的xiaomi的wxss
/* pages/xiaomi/xiaomi.wxss */
/* 背景颜色 */
page{
background-color: red;
}
现在的yun.wxss表
/* pages/yun/yun.wxss */
@import "../xiaomi/xiaomi.wxss";
运行结果:
例子:顶部导航栏
JavaScript代码:
/**
* 页面的初始数据
*/
data: {
tabIndex:0,
tablist: ['推荐', '手机', '智能'],
},
ch:function(e){
console.log(e.target.dataset.index);
this.setData({
tabIndex: e.target.dataset.index
})
},
WXML:
<!--pages/test1/test1.wxml-->
<view class='a' bindtap='ch'>
<!-- 循环第一次时index为0,如果tabIndex==index,执行active动作
0 == 0 active
1 == 1 active
2 == 1 active
-->
<view wx:for="{{ tablist }}" data-index="{{index}}" class="{{ tabIndex==index? 'active':'' }}"> {{item}} </view>
</view>
<view class='wrap' wx:if="{{ tabIndex ==0 }}">手机</view>
<view class='wrap' wx:if="{{ tabIndex ==1 }}">推荐</view>
<view class='wrap' wx:if="{{ tabIndex ==2 }}">智能</view>
WXSS:
/* pages/test1/test1.wxss */
.a{
display: flex;
height: 40px;
background-color: gray;
}
.a>view{
width: 50px;
}
.active{
color: orange;
border-bottom: 2px solid orange;
}
运行结果:
页面跳转
可以定义一个方法去实现这种页面的跳转,(给跳转页面传数值 跳转的路径?)。
跳转普通页面的话我们可以使用
wx.navigateTo({
// 可以写相对路径,也可以写绝对路径
url: url,
})
而跳转tabbar定义的页面可以使用
// 跳转到tabbar页面
wx.switchTab({
url: '/pages/index/index',
})
有时我们往往会为url赋值跳转,我们可以使用拼接字符串的方式去编写url。
有两种拼接方式:
- 拼接字符串方法1:使用 + 号
var url = '../test1/test1?id=' + e.currentTarget.dataset.id+'&name=aaa';
- 拼接字符串方法2:${变量名}
var url = `../tiao2/tiao2?id=${e.currentTarget.dataset.id}&name=bbb`
例子:普通的跳转
初始页面WXML:
<!-- 跳转页面方法 -->
<view bindtap='toclass' data-id='1'>跳转1</view>
<view bindtap='toclass' data-id='2'>跳转2</view>
<view bindtap='toclass' data-id='3'>跳转3</view>
<view bindtap='toclass' data-id='4'>跳转4</view>
<view bindtap='tofu'>跳转到01界面</view>
初始页面JS:
toclass:function(e){
//给跳转页面传数值 跳转的路径?
console.log(e.currentTarget.dataset.id);
// '../test1/test1?id=1230'
// 拼接字符串方法1:使用 + 号
// var url = '../test1/test1?id=' + e.currentTarget.dataset.id+'&name=aaa';
// 拼接字符串方法2:${变量名}
var url = `../tiao2/tiao2?id=${e.currentTarget.dataset.id}&name=bbb`
// 跳转普通页面
wx.navigateTo({
// 可以写相对路径,也可以写绝对路径
url: url,
})
},
tofu:function(){
// wx.navigateTo({
// url: '../index/index',
// })
// 跳转到tabbar页面
wx.switchTab({
url: '/pages/index/index',
})
},
跳转页面tiao2的WXML:
<view>{{name}}</view>
<view>************************************</view>
跳转页面tiao2的JS:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options.id);
this.setData({
name: options.id,
})
},
运行结果:
一起学习,一起进步 -.- ,如有错误,可以发评论