微信小程序的宿主環(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)文章
Electron autoUpdater實現(xiàn)Windows安裝包自動更新的方法
這篇文章主要介紹了Electron autoUpdater實現(xiàn)Windows安裝包自動更新的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Bootstrap每天必學之工具提示（Tooltip）插件，工具提示就是通過鼠標移動選定在特定的元素上時，顯示相關(guān)的提示語，感興趣的小伙伴們可以參考一下2016-04-04
工作小知識積累，獲取圖片的大小，需要的朋友可以參考下。2011-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)年月日表單三級聯(lián)動，生日欄表單三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了基于javascript實現(xiàn)隨機顏色變化效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
JavaScript中使用Spread運算符的八種方法總結(jié)
這篇文章主要給大家介紹了JavaScript中使用Spread運算符的八種方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-06-06
這篇文章主要為大家詳細介紹了原生js實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
Web打印有很多方式，水晶報表使用的恐怕比較多，但這東西是收費軟件，老板說不能用:(。2009-08-08
TypeScript 是 JavaScript 的超集，TypeScript 經(jīng)過編譯之后都會生成 JavaScript 代碼。TypeScript 最大的特點就是類型化，因此才叫做 TypeScript。比起弱類型的 JavaScript，類型化的 TypeScript 顯得更加容易維護。2015-06-06
如何使Chrome控制臺支持多行js模式——意外發(fā)現(xiàn)
一直以來，Chrome控制臺都缺少象IE調(diào)試臺那樣的多行執(zhí)行模式,今天意外發(fā)現(xiàn)Chrome其實也支持多行模式2013-06-06