微信小程序搭建+框架+案例

·  阅读 236

关于app.json中的tabBar

app.json中,tabBar的list为2~5项,参见app.json全局配置;另外,tabBar默认位置是在页面的底部,tabBar在页面中底部还是顶部的位置是可以调的,参数项是position,参见tabBar配置

"tabBar": {
    "position": "top",
    "list": [
        //......
        //list数组里的元素项数必须为2~5
    ]
}
复制代码

组件属性值中的数据绑定

视图模板中,数据绑定这一块,不仅可以作为组件内容,还可以作为组件属性值:

<!--index.wxml-->
<view id="{{userId}}">我是{{userName}}</view>

//index.js
Page({
    data: {
        userName: "Anna",
        userId: "HDu323f"
    },
})
复制代码

调试器中可以看到wxml被解析为:<view id="HDu323f">我是Anna</view>

元素的hidden

元素的显示和隐藏可以用hidden的true和false来控制,hidden特性和vue的v-show类似,不论显隐都会被渲染出来,只不过页面上不显示而已。

关于循环渲染

循环渲染中的key

循环里,index是唯一值,但不是稳定唯一值,下面这个例子对这句话进行说明示例:

<!--index.wxml-->
<view wx:for="{{arr}}" wx:key="index" bindtap='tapHandler' data-id='{{item.id}}'>{{item.text}}</view>

//index.js
data: {
    arr: [
      {id: 1, text: "a"},
      {id: 2, text: "b"},
      {id: 3, text: "c"}
    ],
},
//事件处理函数
tapHandler(e) { //去掉当前点击的元素
    let arr = this.data.arr.filter(item => { return item.id != e.target.dataset.id})
    this.setData({
        arr
    })
},
复制代码

在页面上渲染出来的"a""b""c"中,点击"a","a"会被删除,由于元素的key是index,原本的"a-0,b-1,c-2",删除a元素后这块会被重新渲染为"b-0,c-1"。所以,循环里,index是唯一值,但不是稳定唯一值。那么我们一般可以用元素的id之类的作为key值来保证其稳定,比如在这个例子里我们以元素的id作为其key值wx:key="{{item.id}}"。这样在上述的演示过程中,点击a元素删除后为"b-1,c-2"不会被重新分配key进行渲染。

循环渲染中item的重命名

微信小程序的wx:for中,索引值默认是index,元素自身默认是item。对于item,我们可以进行重命名:

<!--item被重命名为i-->
<view wx:for="{{arr}}" wx:for-item="i" wx:key="{{i.id}}" bindtap='tapHandler' data-id='{{i.id}}'>{{i.text}}</view>
复制代码

template模板的使用

<!--hello.wxml-->
<template name="h">Hello~</template>
<template name="hi">Hello~{{user}}</template>

<!--index.wxml-->
<!--hello.wxml和index.wxml在同一目录下-->
<import src="hello.wxml"/>
<template is="h"></template>
<template is="hi" data="{{user: 'Anna'}}"></template>
<!--页面上渲染出的结果为“Hello~Hello~Anna”-->
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改