本文共 3755 字，大约阅读时间需要 12 分钟。

目录

---

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

例子：调用data数据

在JavaScript中：

data: {     name:"赵丽颖",    arr:["杨晨","司徒"],}

在WXML中调用JavaScript中的data数据

   
     {
  {name}} 
   
   
     {
  {arr[0]}} {
  {arr[1]}} 
   

运行结果：

例子：设置隐藏，通过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中

   
     {
  {name}} 
   
   
     {
  {arr[0]}} {
  {arr[1]}} 
   
   
     {
  { obj.name }} {
  { obj.age }}
   
    
   
    看是否隐藏
    
   
     
    
   
    
     
    隐藏  
    显示  
    增加   
    点击切 
   

运行效果：

 

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

wx:for会根据数组的数量自动生成标签数量

WXML中代码：

    
   
    {
  { item }}
    
   
    {
  {index}}----{
  { item }}
    --> 
   
     
    
     {
  {item}}
    
   

JavaScript中：

data: {     arr:["杨晨","司徒"],    arr1: ["a", "b","c","d"],  },ch:function(e){    console.log(e.target.dataset.index)    console.log(e)  }

运行结果：

 

运算

三元运算

一开始将flag的值设置true或false效果

data: {    flag:false  },

现在使用三元运算的方式，效果是相同的

 

算术运算

a=5，b=8，c=10

   
    {
  {a + b}} + {
  { c }} + {
  { 1+3 }}
   

data: {    a:5,    b:8,    c:10  },

 

逻辑运算

length>5为false

   
    aaaaaaaaa 
   

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：

   
   
      
    
      {
  {item}} 
    
   
   
    手机
   
   
    推荐
   
   
    智能
   

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：

   
   
    跳转1
   
   
    跳转2
   
   
    跳转3
    
   
    跳转4
   
   
    跳转到01界面
   

初始页面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：

   
    {
  {name}}
   
   
    ************************************
   

跳转页面tiao2的JS：

/**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    console.log(options.id);    this.setData({      name: options.id,    })  },

运行结果：

 

 

 

 

 

 

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

 

转载地址：https://kongchengji.blog.csdn.net/article/details/94360602 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！