微信小程序的标签及常见样式

view

类似div 块状元素 可设置 宽高!

fix-direction:row   横向布局

fix-direction:column    纵向布局

---

横向滑动

标签组件: swiper和swiper-item(单个页面)

一般都是照片! 视屏和音频都可不行,上传代码包大小有限制!

swiper组件常用属性:

indicator-dots  boolean false 是否显示面板指示点!
indicator-color="#ccc" color 只能用十六进制 指示点颜色!
indicator-active-color="blue" 当前选中的指示点颜色!
autoplay    boolean false   是否自动切换!
interval    number  5000(毫秒)    自动切换的时间!
circular    boolean false   是否采用衔接滑动!

<swiper class="swiper-container" indicator-dots indicator-color="#ccc" indicator-active-color="blue" circular>
    <!-- 第一项轮播图 -->
    <swiper-item>
        <view class="item">
            <image src="/img/001.jpg"></image>
        </view>
    </swiper-item>
​
     <!-- 第二项轮播图  -->
     <swiper-item>
        <view class="item">
            <image src="/img/002.jpg"></image>
        </view>
    </swiper-item>
     <!-- 第三项轮播图  -->
     <swiper-item>
        <view class="item">
            <image src="/img/003.jpg"></image>
        </view>
    </swiper-item>
</swiper>

竖向滑动

组件: scroll-view 滚动的视图容器 必须给个固定高度!

<!-- scroll-y 属性   允许竖向滚动 -->
​
<!-- 注意，使用竖向滚动时，必须给个固定高度 -->
​
<!-- scroll-x 属性   允许横向滚动 -->
​
<scroll-view  scroll-y>
​
•    <view></view>
​
•    <view></view>
​
•    <view></view>
​
</scroll-view>

---

text标签

类似HTML中span标签 是个行内标签!

该标签只有一个作用 selectable(要加,不加效果不显示)!

<text selectable>15876345671</text>

在实际页面 长按可以复制!!

---

rich-text

渲染HTML标签-用于小程序书写

要知道,HTML标签与小程序标签不是一个概念,不能直接用!

<rich-text nodes="<h1 style='color:red;'>苏苏少年</h1>"></rich-text>

---

button组件

<button>默认按钮</button>