• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序:WXML语法(数据绑定、列表渲染、条件渲染、九九乘法表、导航条) ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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{
  width: 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{
  width:95%;
  background-color:■#fff;
  margin:40rpx auto;
  border-radius:6rpx 6rpx 0 0;
  font-size:28rpx;
}
.header{
  width: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)测试结果

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap