小程序开发（II）

1、 说明

1.wx:if指令

条件渲染

Wx:if用于条件渲染。如果条件为true，将生成内容。如果条件为false，则不会生成内容。它也可以替换为hidden，这与wx:if规则相反

2.wx：用于说明

wx:for指令用于循环列表。回收的每一项都通过该项返回，呈现列表，并通过索引返回每一项的相应索引。

当循环列表时，当添加wx:key的好处时，当列表将来发生变化时，重新呈现列表的成本将更低

｛｛index｝｝-{｛item.id｝｝-{{item.name｝｝

2、 选项卡栏

在app.json文件中添加tabBar节点。

颜色：选项卡上文本的默认颜色。仅支持十六进制颜色。

SelectedColor：选项卡上所选文本的颜色。仅支持十六进制颜色。

BackgroundColor：选项卡的背景色。仅支持十六进制颜色。

BorderStyle：选项卡上边框的颜色。仅支持黑白。

位置：选项卡栏的位置。仅支持底部/顶部。

自定义：用户定义的tabBar。

列表：选项卡列表。

列表接受一个数组，并且只能配置至少2个选项卡，最多5个选项卡。

PagePath：页面路径，必须首先在页面中定义。

文本：选项卡上的按钮文本。

IconPath：图像路径。图标大小限制为40kb。建议大小为81px*81px。不支持网络图片。

当位置为顶部时，图标不显示。

SelectedIconPath：选定的图像路径。图标大小限制为40kb。建议大小为81px*81px。不支持网络映像。

当位置为顶部时，图标不显示。

3、 跳跃

导航器组件用于页面链接。默认情况下，它只能跳转到普通页面。

如果要跳转到tabBar页面，需要设置open type=“switchTab”。

详细信息</navigator>

菜单</navigator>

使用方法跳转到页面

跳转到普通页面

wx.navigateTo（｛url:“/pages/details/details”，｝）

跳转到tabBar页面

wx.switchTab（｛url:“/pages/menu/menu”，｝）

使用该方法跳转页面的好处是，在跳转之前可能需要做其他事情，例如验证权限。

4、 确认框和消息框

确认框：

wx.show模式({

标题：“标题”，

成功：res=>｛｝

})

消息框：

wx.showToast({

标题：“标题”，

持续时间：1000

})