1.常用的视图容器组件
view类似于div进行使用
<div></div>====<view></view>scroll-view实现滚动列表效果
-
<scroll-view scroll-y> -
<view></view> -
<view></view> -
<view></view> -
</scroll-view>
注意：在样式中必须给scroll-view加一个固定高度
scroll-y:纵向滚动 scroll-x:横向滚动
swiper和swiper-item轮播图容器组件和轮播图item组件
-
<swiper> -
<swiper-item> -
<view>A</view> -
</swiper-item> -
<swiper-item> -
<view>A</view> -
</swiper-item> -
<swiper-item> -
<view>A</view> -
</swiper-item> -
<swiper>
其中 swiper可接收不同属性
2.常见的基础内容组件
text:类似于span，长按选中复制只能在text节点下 例如
<text selectable>长按复制文本<text>新版本把selectable替换成了 user-select 文章发布之时selectable可用
rich-text:把html渲染为UI结构
四. 模板语法
在页面中渲染数据时所用到的一系列语法叫做模板语法，对应到 Vue 中就是指令的概念。
4.1 数据绑定
-
插值
{{}}小程序中无论是属性的绑定还是内容的绑定都必须要使用
{{}}。--1. 属性绑定 <switch checked="{{false}}" /> --2. 类名绑定 <view class="{{isActive ? 'active' : ''}}" >首页</view> --3. 内容绑定 <text>{{ msg }}</text> -
简易数据绑定
model:value="{{数据名}}"语法实现了双向的数据绑定，但是目前只能用在input和textarea组件中。
4.2 条件渲染
-
控制属性：相当于 Vue 中指令的概念，在小程序中做控制属性
wx:if根据表达式的值渲染内容，值为真时显示wx:elif条件语句wx:else用在wx:if的后面，不可单独使用，wx:if表达式值为假时显示
<!-- 条件渲染 wx:if --> <view wx:if="{{result===1}}">剪刀</view> <view wx:elif="{{result===2}}">石头</view> <view wx:else>布</view> -
组件属性：相当于vue 中的 v-show
hidden根据表达式的值渲染内容，值为真时隐藏- 通过
[hidden] { display: none; }来实现内容的隐藏
<!-- 隐藏 hidden --> <view hidden="{{result===2}}">测试hidden</view> <!-- 如果条件频繁切换,用hidden 不频繁 wx:if wx:elif wx:else -->
4.3 循环渲染
wx:for根据数组重复渲染组件内容index默认值，访问数组的索引值item默认值，访问数组的单元值
wx:key列表项的唯一标识符（不使用 {{}}）- 数组单元是对象时，只需要写属性名
- 数组单元是简单类型时，推荐使用
*this
wx:for-index自定义访问数组索引的变量名wx:for-item自定义访问数组单元的变量名
<!-- 列表渲染 循环 对象-->
<!-- wx:for="{{数据}}" 默认的 item 项 index 索引 -->
<!-- 如果item index 和其他名称冲突, 可以用 wx:for-item 和 wx:for-index 对默认的item index的名称进行修改 -->
<!-- wx:key 直接就填 字段名就可以了 -->
<view wx:for="{{students}}" wx:key="id">索引:{{index}} 姓名: {{item.name}}---年龄:{{item.age}}
</view>
<!-- 数组 -->
<!-- 简单数据, wx:key 想要用自身的数据来显示 用 *this -->
<view wx:for="{{history}}" wx:key="*this">{{item}}
</view>
