模板语法轮播

1.常用的视图容器组件

  view类似于div进行使用

<div></div>====<view></view>

  scroll-view实现滚动列表效果

1. <scroll-view scroll-y>

2. <view></view>

3. <view></view>

4. <view></view>

5. </scroll-view>

                注意：在样式中必须给scroll-view加一个固定高度

            scroll-y:纵向滚动    scroll-x:横向滚动  

swiper和swiper-item轮播图容器组件和轮播图item组件

1. <swiper>

2. <swiper-item>

3. <view>A</view>

4. </swiper-item>

5. <swiper-item>

6. <view>A</view>

7. </swiper-item>

8. <swiper-item>

9. <view>A</view>

10. </swiper-item>

11. <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>