微信小程序的宿主環(huán)境實(shí)現(xiàn)代碼
更新時(shí)間：2022年10月06日 09:52:44 作者：H·976
這篇文章主要介紹了微信小程序的宿主環(huán)境,包括scroll-view 組件的基本使用，text 組件的基本使用及rich-text 組件的基本使用，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
??小程序的宿主環(huán)境 - 組件
1.scroll-view 組件的基本使用
實(shí)現(xiàn)如圖的縱向滾動(dòng)效果
<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
實(shí)現(xiàn)如圖的橫向滾動(dòng)效果：
<scroll-view class="container_2" scroll-x> <view>橫 向 滑 動(dòng) 演 示</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 組件的基本使用
實(shí)現(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 組件的常用屬性
屬性 | 類型 | 默認(rèn)值 | 說明 |
indicator-dots | boolean | false | 是否顯示面板指示點(diǎn) |
| indicator-color | color | rgba(0, 0, 0, .3) | 指示點(diǎn)顏色 |
| indicator-active-color | color | #000000 | 當(dāng)前選中的指示點(diǎn)顏色 |
| autoplay | boolean | false | 是否自動(dòng)切換 |
| interval | number | 5000 | 自動(dòng)切換時(shí)間間隔 |
| circular | boolean | false | 是否采用銜接滑動(dòng) |
3.text 組件的基本使用
文本組件
類似于 HTML 中的 span 標(biāo)簽，是一個(gè)行內(nèi)元素
通過 text 組件的 selectable 屬性，實(shí)現(xiàn)長按選中文本內(nèi)容的效果：
<view> 手機(jī)號(hào): <text selectable>17608777</text> </view>
4.rich-text 組件的基本使用
富文本組件
支持把 HTML 字符串渲染為 WXML 結(jié)構(gòu)
<rich-text nodes="<h1 style='color:pink;'>一級(jí)標(biāo)題 <h1>"></rich-text>
到此這篇關(guān)于微信小程序的宿主環(huán)境的文章就介紹到這了,更多相關(guān)小程序宿主環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Electron autoUpdater實(shí)現(xiàn)Windows安裝包自動(dòng)更新的方法
這篇文章主要介紹了Electron autoUpdater實(shí)現(xiàn)Windows安裝包自動(dòng)更新的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
Bootstrap每天必學(xué)之工具提示（Tooltip）插件
Bootstrap每天必學(xué)之工具提示（Tooltip）插件，工具提示就是通過鼠標(biāo)移動(dòng)選定在特定的元素上時(shí)，顯示相關(guān)的提示語，感興趣的小伙伴們可以參考一下2016-04-04
工作小知識(shí)積累，獲取圖片的大小，需要的朋友可以參考下。2011-09-09
js實(shí)現(xiàn)年月日表單三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)年月日表單三級(jí)聯(lián)動(dòng)，生日欄表單三級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
基于javascript實(shí)現(xiàn)隨機(jī)顏色變化效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)隨機(jī)顏色變化效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
JavaScript中使用Spread運(yùn)算符的八種方法總結(jié)
這篇文章主要給大家介紹了JavaScript中使用Spread運(yùn)算符的八種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
javascript 局部頁面打印實(shí)現(xiàn)代碼
Web打印有很多方式，水晶報(bào)表使用的恐怕比較多，但這東西是收費(fèi)軟件，老板說不能用:(。2009-08-08
TypeScript 是 JavaScript 的超集，TypeScript 經(jīng)過編譯之后都會(huì)生成 JavaScript 代碼。TypeScript 最大的特點(diǎn)就是類型化，因此才叫做 TypeScript。比起弱類型的 JavaScript，類型化的 TypeScript 顯得更加容易維護(hù)。2015-06-06
如何使Chrome控制臺(tái)支持多行js模式——意外發(fā)現(xiàn)
一直以來，Chrome控制臺(tái)都缺少象IE調(diào)試臺(tái)那樣的多行執(zhí)行模式,今天意外發(fā)現(xiàn)Chrome其實(shí)也支持多行模式2013-06-06