美文网首页
Weixin Wxml

Weixin Wxml

作者: 喵王不瞌睡 | 来源:发表于2018-09-19 14:06 被阅读0次

    标签

    <view class='box-item'></view>
    <!-- 基础块相当于div -->
    
    <block>
        <view class='box-header'></view>
        <view class='box-body'></view>
    </block>
    <!-- 相当于一组view -->
    

    循环,判断

    <!-- wx:for -->
    <view class='box'>
      <view class='box-item' wx:for="{{lists}}" wx:for-index="index" wx:for-item="item">
        <text>[{{index}}] : "name" : {{item.name}}</text>
      </view>
    </view>
    
    <!-- wx:if -->
    <view wx:if="{{number > 5}}"> 1 </view>
    <view wx:elif="{{number > 2}}"> 2 </view>
    <view wx:else> 3 </view>
    

    模板

    <template name="newItem">
      <view class="new-item">
        <text> {{title}} </text>
        <text> {{time}} </text>
      </view>
    </template>
    
    <block wx:for="{{newLists}}" wx:for-item="new">
    <template is="newItem" data="{{...new}}"/>
    </block>
    
    Page({
      data: {
        newLists:[
          {title:'china',time:'2018'},
          {title:'america',time: '2019' },
        ]
      }
    })
    

    引入

    <import src="../templates/new-item.wxml"/>
    
    <block wx:for="{{newLists}}" wx:for-item="new">
    <template is="newItem" data="{{...new}}"/>
    </block>
    
    <!-- include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置 -->
    <include src="../layouts/footer.wxml"/>
    

    相关文章

      网友评论

          本文标题:Weixin Wxml

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