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

471 阅读3分钟

数据绑定

官方文档

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,
    })
  },

运行结果:

 

 

 

 

 

 

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