美文网首页
框架视图层(二)

框架视图层(二)

作者: ca8f642ca29e | 来源:发表于2018-01-23 11:38 被阅读0次

    wxml

    数据绑定
    1.简单绑定。Mustache 语法双括号包裹变量,组件属性、控制属性、关键字变量绑定需要在双引号之内
    2.运算。在{{}}中进行运算,三元、算术运算、逻辑判断、字符串运算、数据路径运算。
    3.组合。组成新的对象和数组

          数组
          <view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
              Page({
                  data: {
                      zero: 0
                  }
               })
          对象
        
        1.<template is="objectCombine" data="{{for: a, bar: b}}"></template>
            Page({
                data: {
                  a: 1,
                  b: 2
                }
          })
        2....三点展开语法
        <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
            Page({
              data: {
                obj1: {
                    a: 1,
                    b: 2
                },
                obj2: {
                  c: 3,
                  d: 4
                }
            }
        })
        3.同名变量覆盖、依靠键值直接获取
        <template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
              Page({
                data: {
                  obj1: {
                      a: 1,
                      b: 2
                  },
                obj2: {
                    b: 3,
                    c: 4
                },
                a: 5
            }
          })
          最终data = {a: 5, b: 3, c: 6}
    

    花括号和引号中出现空格,将会解析生字符串

    列表渲染

    • 默认当前项下标index,数组当前项的变量名为item,可以使用wx:for-item,wx:for-index 指定,此循环语法可以额嵌套
    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
      <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
        <view wx:if="{{i <= j}}">
          {{i}} * {{j}} = {{i * j}}
        </view>
      </view>
    </view>
    
    • block wx:for
    <block wx:for="{{[1, 2, 3]}}">
      <view> {{index}}: </view>
      <view> {{item}} </view>
    </block>
    
    • wx:key unique唯一字符串,保证动态改变或者追加时,每个组件的状态都不改变。*this代表循环中的item,必须唯一
    页面  wxml
    <switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
    <button bindtap="switch"> Switch </button>
    <button bindtap="addToFront"> Add to the front </button>
    
    <switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
    <button bindtap="addNumberToFront"> Add to the front </button>
    
    js wxjs
    Page({
      data: {
        objectArray: [
          {id: 5, unique: 'unique_5'},
          {id: 4, unique: 'unique_4'},
          {id: 3, unique: 'unique_3'},
          {id: 2, unique: 'unique_2'},
          {id: 1, unique: 'unique_1'},
          {id: 0, unique: 'unique_0'},
        ],
        numberArray: [1, 2, 3, 4]
      },
      switch: function(e) {
        const length = this.data.objectArray.length
        for (let i = 0; i < length; ++i) {
          const x = Math.floor(Math.random() * length)
          const y = Math.floor(Math.random() * length)
          const temp = this.data.objectArray[x]
          this.data.objectArray[x] = this.data.objectArray[y]
          this.data.objectArray[y] = temp
        }
        this.setData({
          objectArray: this.data.objectArray
        })
      },
      addToFront: function(e) {
        const length = this.data.objectArray.length
        this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
        this.setData({
          objectArray: this.data.objectArray
        })
      },
      addNumberToFront: function(e){
        this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
        this.setData({
          numberArray: this.data.numberArray
        })
      }
    })
    

    注意

    1.wx:for 参数为字符串,将默认为字符串数组
    <view wx:for="array">  === <view wx:for="{{['a','r','r','a','y']}}">
    2.花括号和引号之间有空格,将被解析为字符串
    <view wx:for="{{[1,2,3]}} "> === <view wx:for="{{[1,2,3] + ' '}}" >
    

    条件渲染

    • wx:if
    基础语法
    <view wx:if="{{length > 5}}"> 1 </view>
    <view wx:elif="{{length > 2}}"> 2 </view>
    <view wx:else> 3 </view>
    
    • block wx:if
    **block是包装元素,不是组件,只能接受控制属性**
    <block wx:if="{{true}}">
      <view> view1 </view>
      <view> view2 </view>
    </block>
    

    wx:if与hidden对比:判断条件切换频繁,使用hidden

    模板(类似于layout)

    • 定义模板
    使用name属性定义模板
    <!--
      index: int
      msg: string
      time: string
    -->
    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>
    
    • 使用模板
    使用is属性将模板声明并且传入需要的数据
    <template is="msgItem" data="{{...item}}"/>
    is属性还可以判断使用哪些模板
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
    

    事件

    • 概念,同js事件绑定
    • 使用方式
    <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
    
    Page中存在同名处理函数
    Page({
      tapName: function(event) {
        console.log(event)
      }
    })
    
    • 详解(不在冒泡函数列表、无特殊说明都属于非冒泡)
      • 冒泡,当一个组件上的事件被触发后,该事件会向父节点传递。
      • 非冒泡,当一个组件上的事件被触发后,该事件不会向父节点传递。
    • 事件绑定、冒泡
      • 同组件属性key=value格式
      • key以bind、catch开头。直接连接或者使用bind:tag,catch阻止冒泡事件
      • value 对应page中的同名函数
    <view id="outer" bindtap="handleTap1">
      outer view
      <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
      </view>
    </view>
    
    • 事件捕获
      • capture-bind、capture-catch 后者直接取消捕获和冒泡
    在下面的代码中,点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
    <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
      outer view
      <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
        inner view
      </view>
    </view>
    
    如果将上面代码中的第一个capture-bind改为capture-catch,将只触发handleTap2。
    <view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
      outer view
      <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
        inner view
      </view>
    </view>
    
    • 事件对象(参数属性列表)

    引用(文件载入)

    • import
    <import src="item.wxml"/>
    <template is="item" data="{{text: 'forbar'}}"/>
    
    C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。只可以直接使用。
    <!-- A.wxml -->
    <template name="A">
      <text> A template </text>
    </template>
    <!-- B.wxml -->
    <import src="a.wxml"/>
    <template name="B">
      <text> B template </text>
    </template>
    <!-- C.wxml -->
    <import src="b.wxml"/>
    <template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
    <template is="B"/>
    
    • include
    include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,如:
    
    <!-- index.wxml -->
    <include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>
    <!-- header.wxml -->
    <view> header </view>
    <!-- footer.wxml -->
    <view> footer </view>
    

    相关文章

      网友评论

          本文标题:框架视图层(二)

          本文链接:https://www.haomeiwen.com/subject/wihlaxtx.html