微信小程序滾動(dòng)、輪播圖和文本實(shí)例詳解
更新時(shí)間：2022年08月05日 10:54:09 作者：熱愛(ài)編程的小白白
輪播圖是我們?nèi)粘ｉ_(kāi)發(fā)中經(jīng)常會(huì)遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于微信小程序滾動(dòng)、輪播圖和文本的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(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)值 | 說(shuō)明 |
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)元素
通過(guò) text 組件的 selectable 屬性，實(shí)現(xiàn)長(zhǎng)按選中文本內(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>
附：微信小程序輪播圖單獨(dú)添加圖片、修改輪播圖圖片、單獨(dú)修改某張圖片
<!--pages/swiper/swiper.wxml-->
<text>pages/swiper/swiper.wxml</text>
<!-- 滑塊視圖 先添加一個(gè)滑塊容器 -->
<!-- 是否自動(dòng)播放 ，增加提示點(diǎn) ，是否銜接滑動(dòng)（例如從最后一張到第一張），提示點(diǎn)顏色 -->
<swiper
autoplay="{{false}}"
indicator-dots
circular
indicator-color="rgba(0,0,0,1)">
<!-- 添加一個(gè)內(nèi)容 更改輪播圖圖片 -->
<block wx:for="{{image}}" wx:key="this" wx:for-index="ind1">
<!-- 將該for的下標(biāo)Index命名為ind1 可以不用block，可以直接在swiper-item使用wx:for-->
<swiper-item >
<image src="{{item}}" data-ccc="ind1" ></image>
<!-- 將下標(biāo)給到本地?cái)?shù)據(jù)庫(kù)data，并且命名ccc -->
</swiper-item >
</block>
</swiper>
<button bindtap="getImg">更改輪播圖的圖片</button>
<button bindtap="getc">在輪播圖最后面添加一個(gè)圖片</button>
<!-- 單獨(dú)換圖片 -->
<swiper indicator-dots
indicator-color="rgba(20,0,225,1)"
next-margin="20px"
previous-margin="20px"
autoplay
bindchange="pdd">
<swiper-item wx:for="{{imgArr}}" wx:key="this" > <!-- 循環(huán)imgArr里的內(nèi)容 -->
<image src="{{item}}" bindtap="getima" data-cc="{{index}}" >
<!--image src="{{item}}含義： imgArr變量里的內(nèi)容，如本文定義的圖片地址 -->
<!-- 將下標(biāo)給到本地?cái)?shù)據(jù)庫(kù)data，并且命名cc -->
</image>
</swiper-item >
</swiper>Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
image: ["/images/0.jpg", "/images/1.jpg", "/images/2.jpeg"],
imgArr:["/images/0.jpg", "/images/1.jpg", "/images/2.jpeg"],
pdd:0,
},
getImg() {
var _this = this;
wx.chooseImage({
count: 3, //選擇1張，最多選擇9張
sizeType: ['original', 'compressed'], //是否原圖
sourceType: ['album', 'camera'], //是否用相機(jī)還是相冊(cè)
success(res) {
// tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths
_this.setData({
image: res.tempFilePaths,
})
}
})
},
getc() {
var acc=this;
wx.chooseImage({
count: 1, //選擇1張，最多選擇9張
sizeType: ['original', 'compressed'], //是否原圖
sourceType: ['album', 'camera'], //是否用相機(jī)還是相冊(cè)
success(res) {
// tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths);
acc.data.image.push([tempFilePaths.toString()])
// 在數(shù)組image后面增加圖片
console.log(acc.data.image);
acc.setData({
image:acc.data.image
})
}
})
},
getima(e){
var _this=this;
//1.拿到我點(diǎn)擊的圖片下標(biāo)
console.log(e);
// //2.把下標(biāo)賦值給ac
var ac=parseInt(e.currentTarget.dataset.cc);
// console.log(ac);
// console.log(this.data.pdd);
wx.chooseImage({
count: 3, //選擇1張，最多選擇9張
sizeType: ['original', 'compressed'], //是否原圖
sourceType: ['album', 'camera'], //是否用相機(jī)還是相冊(cè)
success(res) {
// tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths
// 3.將選擇的圖片的路徑，賦值給imgArr
_this.data.imgArr[ac]=res.tempFilePaths[0]
// _this.data.imgArr[_this.data.pdd]=res.tempFilePaths[0]
_this.setData({
//4.將存在_this.data.imgArr的路徑，賦值到imgArr
imgArr: _this.data.imgArr,
})
}
})
},
pdd(e){
// console.log(e.detail.current);
this.setData({
pdd:e.detail.current
})
}
})這里pdd（e）使用的是第二種方法（不需要可以刪除），將所要修改的圖片信息賦值給data:{}定義的pdd，此時(shí)_this.data.imgArr[_this.data.pdd]=res.tempFilePaths[0]這行里的_this.data.pdd為輪播圖里的第幾個(gè)圖片，將要替換的圖片的數(shù)據(jù)，替換近imArr[]里的第幾個(gè)（_this.data.pdd）圖片，最后_this.setData進(jìn)行替換
通過(guò)console.log輸出的數(shù)據(jù)，看到將下標(biāo)寫(xiě)入了本地?cái)?shù)據(jù)，并且命名為cc
總結(jié)
到此這篇關(guān)于微信小程序滾動(dòng)、輪播圖和文本的文章就介紹到這了,更多相關(guān)微信小程序滾動(dòng) 輪播圖 文本內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js判斷運(yùn)行jsp頁(yè)面的瀏覽器類型以及版本示例
做了一個(gè)判斷瀏覽器類型和版本號(hào)的業(yè)務(wù)，記錄下相關(guān)的js代碼，個(gè)人感覺(jué)還不錯(cuò)，需要的朋友可以參考下2013-10-10
JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果(續(xù))
上次導(dǎo)航欄懸停的那個(gè)頁(yè)面在IE上運(yùn)行的時(shí)候，會(huì)出導(dǎo)航欄不停的抖動(dòng)問(wèn)題，在本文已有完美的解決方法，將導(dǎo)航欄的定位方式由原來(lái)的absolute改為fixed即可2013-09-09
為數(shù)據(jù)添加append,remove功能...2006-10-10
動(dòng)態(tài)的改變IFrame的高度實(shí)現(xiàn)IFrame自動(dòng)伸展適應(yīng)高度
動(dòng)態(tài)的改變IFrame的高度，實(shí)現(xiàn)IFrame自動(dòng)伸展，父頁(yè)面也自動(dòng)神縮原理： 在IFrame子頁(yè)面一加載的時(shí)候，調(diào)用父IFrame對(duì)象，改變其高度2012-12-12
js 連續(xù)賦值的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇js 連續(xù)賦值的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
js與jquery實(shí)時(shí)監(jiān)聽(tīng)輸入框值的oninput與onpropertychange方法
這篇文章主要介紹了js與jquery實(shí)時(shí)監(jiān)聽(tīng)輸入框值的oninput與onpropertychange方法,實(shí)例分析了oninput與onpropertychange實(shí)現(xiàn)下拉框里自動(dòng)匹配關(guān)鍵字實(shí)時(shí)監(jiān)聽(tīng)文本框value值變化的功能,需要的朋友可以參考下2015-02-02
JavaScript事件 "事件對(duì)象"的注意要點(diǎn)
這篇文章主要介紹了JavaScript事件,告訴大家"事件對(duì)象"的注意要點(diǎn)，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了js文本框跑馬燈效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
深入學(xué)習(xí)JavaScript對(duì)象
今天小編就和大家深入學(xué)習(xí)JavaScript對(duì)象，感興趣的小伙伴們可以參考一下，大家一起學(xué)習(xí)。2015-10-10
js中有各種位置相關(guān)的屬性,平時(shí)用起來(lái)比較混亂,特此整理一下,下面這篇文章主要給大家介紹了關(guān)于js中易弄混淆的“位置”相關(guān)屬性的相關(guān)資料,需要的朋友可以參考下2022-04-04