zoukankan      html  css  js  c++  java
  • 小程序:WXML语法(数据绑定、列表渲染、条件渲染、九九乘法表、导航条)

    1、数据绑定

    小程序的数据绑定放弃了DOM结构,不用像html那样先获取DOM,然后再赋值给标签。小程序的数据绑定是单向的(从逻辑层(js)到UI层)

    (1)简单绑定:

     data: {
          msg: 'hello!'
        }
    <view>{{msg}}</view>

     (2)运算

    <view>{{a+b+c}}</view>
      data: {
        a: 1,
        b: 2,
        c: 3
      }

     (3)数组

    <view wx:for="{{[a,b,c, 1, 2, 3, 4]}}"> {{item}} </view>
      data: {
        a: 1,
        b: 2,
        c: 3
      }

     (4)组件的属性

    初始化颜色的值并在属性中获取该值作为属性的值:

      data: {
      num:5,
        color:"red"
      },
    <view style="color:{{color}}">nihao</view>

    (5)修改data属性的值的方法(不能采用传统的等号的赋值方法)

    <view style="color:{{color}}">nihao</view>
    <button bindtap="changecolor">点击变色</button>
      changecolor(){
    this.setData({
      color:'yellow'
    })
      },

    data的原始color值为red,这里点击按钮的时候调用函数,将颜色修改为了yellow

      data: {
      num:5,
        color:"red"
      },

    点击按钮前:

     点击按钮后:

     (6)数组、对象

      data: {
        object: {
          key: 'Hello '
        },
        array: ['MINA','TOM']
      },
    <view>{{object.key}} {{array[1]}}</view>

    对象是以属性名和属性值的形式存储,可以用属性名获取值

    数组可以通过下标获取数组的相应位置的值

    2、列表渲染

    (1)微信小程序中的for循环

    <view wx:for="{{4}}">晚上好</view>

    (2)for循环遍历数组

    定义数组:

      data: {
     arr:[1,2,3,4]
      }

    绑定数组显示数组的数据:

    <view wx:for="{{arr}}">
    {{item}}------{{index}}
    </view>

    item:当前值

    index:当前值的下标

    (3)循环的优化(block标签的应用)

    VIEW方式:

    定义数组:

     data: {
        array: ['MINA','TOM','xiaoming']
      },

    绑定数组,显示数据:

    <view wx:for="{{array}}">
    <view>{{item}}------{{index}}</view>
    </view>

    查看页面元素,有多余的view:

    BLOCK方式:

    <block wx:for="{{array}}">
    <view>{{item}}------{{index}}</view>
    </block>

    查看页面元素已经没有多余的view标签了:

     (4)wx:key(唯一标识符,可以提高列表渲染的效率)

    <block wx:for="{{array}}" wx:key="index">
    <view>{{item}}------{{index}}</view>
    </block>

    3、条件渲染

    数据:

      data: {
      num:5
      }

    对数据进行判断(符合相应的条件才去渲染):

    <view wx:if="{{num > 5}}"> num大于5 </view>
    <view wx:elif="{{num < 5}}"> num小于5 </view>
    <view wx:else> num等于5 </view>

    结果:

    4、练习(九九乘法表)

    准备数据:

      data: {
        number:[1,2,3,4,5,6,7,8,9]
      },

    运用循环的嵌套取出数据完成乘法表的显示:

    <view wx:for="{{number}}" wx:for-item="i"  class="row"><!--外层循环i,内层循环j小于等于i-->
       <view wx:for="{{number}}" wx:for-item="j"  wx:if="{{j<=i}}" class="col">
       {{i}}*{{j}}={{i*j}}
       </view>
    </view>

    样式:

    .row{
      display:flex;
      justify-content: flex-start;
      font-size: 8px;
      
      }
      .col{
       11.1111%;
      }

    测试结果:

    5、练习(导航条)

    (1)初始化数据:

    前面的一个数组存储的是对象,作为导航栏的信息,后面的一个数组存储的是文本信息

     data: {
        t:[{
               name:"全部",
               sub:1
             },
             {
              name:"精华",
              sub:2
            },
            {
              name:"分享",
              sub:3
            },
            {
              name:"问答",
              sub:4
            },
            {
              name:"招聘",
              sub:5
            }
           ],
          arr :['《将进酒·君不见黄河之水天上来》',
                ' 君不见黄河之水天上来,奔流到海不复回',
                ' 君不见高堂明镜悲白发,朝如青丝暮成雪。',
                '人生得意须尽欢,莫使金樽空对月。',
                '天生我材必有用,千金散尽还复来。',
                '烹羊宰牛且为乐,会须一饮三百杯。',
                '岑夫子,丹丘生,将进酒,杯莫停。',
                '与君歌一曲,请君为我倾耳听。',
                '钟鼓馔玉不足贵,但愿长醉不复醒。',
                '古来圣贤皆寂寞,惟有饮者留其名。',
                '陈王昔时宴平乐,斗酒十千恣欢谑。',
                '主人何为言少钱,径须沽取对君酌。',
                '五花马,千金裘,',
                '呼儿将出换美酒,与尔同销万古愁。'
              ],
           currentIndex:1
      },

    判断点击位置的函数:

      tabchange(e){
       this.setData({
        currentIndex:e.currentTarget.dataset.num
    })
    },

    (2)界面

    先通过列表渲染展示导航条的数据,通过判断当前点击的位置来显示不同的样式,如果某一处被点击了,就用tab 和current样式,否则只用tab,这里用三目运算符来处理

    下面的一个view通过列表渲染完成数据的显示

    <view clsss="main">
        <view class="header">
            <block wx:for="{{t}}">
            <view class="tab {{currentIndex==item.sub ? 'current':''}}" bindtap="tabchange" data-num="{{item.sub}}">{{item.name}}</view>
            </block>
        </view>
    </view>
    
    
        <view wx:for="{{arr}}" class="poetry">
         {{item}}
        </view>

    (3)页面样式

    .tab{
      font-size: 32rpx ;
      color:#86C811 ;
    }
    .current{
      color:#fff;
      background-color:#86C811;
      padding:6rpx 8rpx;
    }
    .main{
      95%;
      background-color:■#fff;
      margin:40rpx auto;
      border-radius:6rpx 6rpx 0 0;
      font-size:28rpx;
    }
    .header{
      100%;
      height:120rpx;
      background-color:#F6F6F6;
      display:flex;
      align-items:center;
      justify-content:space-around;
      font-size:32rpx;
    }
    .poetry{
      font-size: 30rpx;
      background-color: #EDEFF0;
    }

    (4)测试结果

  • 相关阅读:
    P3822 [NOI2017]整数
    P4630 [APIO2018] Duathlon 铁人两项
    P3230 [HNOI2013]比赛
    P2570 [ZJOI2010]贪吃的老鼠
    P4576 [CQOI2013]棋盘游戏
    P3256 [JLOI2013]赛车
    P3297 [SDOI2013]逃考
    CF487E Tourists
    设置一个双色球脚本(2)并带颜色输出
    设置一个双色球脚本
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13183400.html
Copyright © 2011-2022 走看看