【小程式】view視圖，swiper輪播圖，scroll-view滑動清單 （線上詳細手冊）

@​​toc​​

前言

👋👋歡迎來到👋👋

🎩魔術之家！！🎩

該文章收錄專欄

✨--- 2022小程式開發從入門到精通 ---✨

專欄内容

​​✨--- 【小程式 -- 啟航篇】一文打通任督二脈 ---✨​​

書接上文 【小程式 -- 啟航篇】一文打通任督二脈 小程式宿主環境構成，上文已介紹了關于宿主環境的通信模式和運作機制，本文着重介紹關于宿主環境的視圖容器和基礎内容元件

宿主環境 - 元件

小程式中的元件是由宿主環境提供的，開發者可以基于元件快速搭建出漂亮的頁面結構。官方把小程式的元件分為了 9 大類，分别是：

• ① 視圖容器② 基礎内容③ 表單元件④ 導航元件⑤ 媒體元件

  ⑥ map 地圖元件

  ⑦ canvas 畫布元件

  ⑧ 開放能力

  ⑨ 無障礙通路

視圖容器類元件

view元件

介紹：

• 普通視圖區域（靜态）
• 類似與HTML的​

  ​div​

  ​标簽,是一個塊狀元素
• 常用于頁面的布局效果

• 基本使用
• 實作如圖的橫向布局：

• 

<!-- 結構 -->
<view class="container">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
-----------------------------------我是一條分割線--------------------------------
/* 樣式 */
.container {
  display: flex;
  justify-content: space-around;
}
.container view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
/* css3文法 */
.container view:nth-child(1) {
  background-color: lightcoral;  
}
.container view:nth-child(2) {
  background-color: lightcyan;
}
.container view:nth-child(3) {
  background-color: lightgoldenrodyellow;
}      

scroll-view

介紹：

• 可滾動的視圖區域（動态）
• 常用來實作清單滾動效果

縱向滾動效果實作      

注意事項： 滑動效果中對整個區域的高度要小于滑動視圖區域的總高度，且要在​

​scroll-view​

​​元件中 加上 ​

​scroll-y​

​

<!--結構-->
<scroll-view class="container" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
------------------------------我是一條分割線---------------------------------------
/* 樣式 */
.container {
  height: 150px;
  border: 3px solid black;
}
.container view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
/* css3文法 */
.container view:nth-child(1) {
  background-color: lightcoral;  
}
.container view:nth-child(2) {
  background-color: lightcyan;
}
.container view:nth-child(3) {
  background-color: lightgoldenrodyellow;
}      

橫向滾動效果實作      

注意： 同樣需要在scroll-view元件中加上 scroll-x ， 最重要的是在樣式設定 要加上 ​

​white-space: nowrap'​

​ 将其設定為 不自動換行，将後面的部分放在區域外

• 效果：

• 

• 代碼：

<!--結構-->
<scroll-view class="container" scroll-x>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>
----------------------------我是分隔符---------------------------------------------
/* 樣式 */
.container {
  width: 100%;
  white-space: nowrap;
}
.container view {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  text-align: center;
  line-height: 300rpx;
}
/* css3文法 */
.container view:nth-child(1) {
  background-color: lightcoral;
}
.container view:nth-child(2) {
  background-color: lightcyan;
}
.container view:nth-child(3) {
  background-color: lightgoldenrodyellow;
}      

swiper和swiper-item

介紹：

• 輪播圖容器元件 和 輪播圖item元件

可以在在swiper元件中加上 一下可選項

• 🎏indicator-dots : 是否顯示面闆顯示點
• 🎏indicator-color： 未選中的面闆點顔色
• 🎏indicator-active-color: 選中面闆點的顔色
• 🎏autoplay ： 自動播放
• 🎏circular： 銜接滑動
• 🎏duration： 滑動的時間間隔
• 🎏interval： 自動切換的時間，也就是停留的時間

代碼：

<!--結構-->
<swiper class="container" indicator-dots circular duration="500" interval="1000"  indicator-color="white" indicator-active-color="lightblue" autoplay>
  <swiper-item>A</swiper-item>
  <swiper-item>B</swiper-item>
  <swiper-item>C</swiper-item>
</swiper>
------------------------------------我是分割線--------------------------------------
/* 樣式 */
.container {
  width: 100%;
}
.container swiper-item {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  text-align: center;
  line-height: 300rpx;
}
/* css3文法 */
.container swiper-item:nth-child(1) {
  background-color: lightcoral;
}
.container swiper-item:nth-child(2) {
  background-color: lightcyan;
}
.container swiper-item:nth-child(3) {
  background-color: lightgoldenrodyellow;
}      

基礎内容元件

text

介紹：

• 文本元件
• 類似于HTML 的span标簽

可以通過對text元件中加上 ​

​user-select​

​設定為可選中

rich-text

富文本标簽介紹：

• 可以通過nodes節點 将HTML 渲染呈對于UI結構

✨謝謝你的閱讀，您的點贊和收藏就是我創造的最大動力！✨