微信小程序开发（五）——数据绑定、运算、样式导入、页面跳转

数据绑定

简单绑定

例子：调用data数据

例子：设置隐藏，通过wx:if方式

例子：wx:for方式用索引去获取数组中的数据

运算

三元运算

算术运算

逻辑运算

样式导入

例子：顶部导航栏

页面跳转

例子：普通的跳转

数据绑定

官方文档

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 = falsethis.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>
<!-- 绑定事件 bindtapwx: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 active1 == 1 active2 == 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,})},

运行结果：

一起学习，一起进步 -.- ，如有错误，可以发评论