微信小程序的宿主環(huán)境實現(xiàn)代碼
更新時間：2022年10月06日 09:52:44 作者：H·976
這篇文章主要介紹了微信小程序的宿主環(huán)境,包括scroll-view 組件的基本使用，text 組件的基本使用及rich-text 組件的基本使用，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
??小程序的宿主環(huán)境 - 組件
1.scroll-view 組件的基本使用
實現(xiàn)如圖的縱向滾動效果
<scroll-view class="container_2" scroll-y> <view>T</view> <view>S</view> <view>J</view> </scroll-view>
.container_2 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container_2 view:nth-child(1){
background-color: red;
}
.container_2 view:nth-child(2){
background-color: yellowgreen;
}
.container_2 view:nth-child(3){
background-color: blue;
}
.container_2{
display: flex;
justify-content: space-around
}
.container_2{
border: 1px solid yellowgreen;
height: 130px;
width: 100px;
}scroll-y 改成 scroll-x
實現(xiàn)如圖的橫向滾動效果：
<scroll-view class="container_2" scroll-x> <view>橫 向 滑 動 演 示</view> </scroll-view>
.container_2 view{
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container_2 view:nth-child(1){
background-color: red;
}
.container_2{
display: flex;
justify-content: space-around
}
.container_2{
border: 1px solid yellowgreen;
height: 100px;
width: 100px;
}2.swiper 和 swiper-item 組件的基本使用
實現(xiàn)如圖的輪播圖效果：
<swiper class="container_3" indicator-dots> <swiper-item> <view class="item">1</view> </swiper-item> <swiper-item> <view class="item">2</view> </swiper-item> <swiper-item> <view class="item">3</view> </swiper-item> <swiper-item> <view class="item">4</view> </swiper-item> </swiper>
.container_3{
height: 160px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: burlywood;
}
swiper-item:nth-child(2) .item{
background-color: yellow;
}
swiper-item:nth-child(3) .item{
background-color: pink;
}
swiper-item:nth-child(4) .item{
background-color: aqua;
}.swiper 組件的常用屬性
屬性 | 類型 | 默認值 | 說明 |
indicator-dots | boolean | false | 是否顯示面板指示點 |
| indicator-color | color | rgba(0, 0, 0, .3) | 指示點顏色 |
| indicator-active-color | color | #000000 | 當前選中的指示點顏色 |
| autoplay | boolean | false | 是否自動切換 |
| interval | number | 5000 | 自動切換時間間隔 |
| circular | boolean | false | 是否采用銜接滑動 |
3.text 組件的基本使用
文本組件
類似于 HTML 中的 span 標簽，是一個行內(nèi)元素
通過 text 組件的 selectable 屬性，實現(xiàn)長按選中文本內(nèi)容的效果：
<view> 手機號: <text selectable>17608777</text> </view>
4.rich-text 組件的基本使用
富文本組件
支持把 HTML 字符串渲染為 WXML 結(jié)構(gòu)
<rich-text nodes="<h1 style='color:pink;'>一級標題 <h1>"></rich-text>
到此這篇關(guān)于微信小程序的宿主環(huán)境的文章就介紹到這了,更多相關(guān)小程序宿主環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
JavaScript中 ?、!和?? 的用法及區(qū)別詳解
在JavaScript中,?., !., 和 ?? 是三個不同的操作符,各自有不同的用途,旨在提高代碼的簡潔性和安全性,尤其是在處理可能的null或undefined值時,下面分別解釋這三個操作符的用法,需要的朋友可以參考下2024-10-10
使用戶點擊后退按鈕使效三行代碼...2007-07-07
這篇文章主要介紹了JS 實現(xiàn)獲取驗證碼 倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
本篇文章主要介紹了微信小程序微信運動步數(shù)的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了js簡單判斷移動端系統(tǒng)的方法,通過JavaScript的navigator.userAgent相關(guān)屬性判斷訪問端的系統(tǒng)類型,非常簡單實用,需要的朋友可以參考下2016-02-02
uniapp中每個頁面可以理解為一個單頁面組件,下面這篇文章主要給大家介紹了關(guān)于如何寫一個uniapp通用頁面組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
本文通過實例代碼給大家介紹了JS圖片輪播與索引變色功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-07-07
這篇文章主要介紹了使用JavaScript開發(fā)IE瀏覽器本地插件實例,本文講解使用JS+注冊表的方式開發(fā)一個IE瀏覽器本地插件,需要的朋友可以參考下2015-02-02
一文詳解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中，Map、Set、WeakMap和WeakSet是四個不同的數(shù)據(jù)結(jié)構(gòu)，它們都有不同的特點和用途，本文詳細介紹了Map、Set、WeakMap和WeakSet的用法及區(qū)別，需要的朋友可以參考下2023-04-04
下面小編就為大家?guī)硪黄鷍s實現(xiàn)class的添加和刪除簡單代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07