微信小程序滾動、輪播圖和文本實例詳解
更新時間：2022年08月05日 10:54:09 作者：熱愛編程的小白白
輪播圖是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的一個需求,下面這篇文章主要給大家介紹了關(guān)于微信小程序滾動、輪播圖和文本的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
??小程序的宿主環(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 | 當(dāng)前選中的指示點顏色 |
| autoplay | boolean | false | 是否自動切換 |
| interval | number | 5000 | 自動切換時間間隔 |
| circular | boolean | false | 是否采用銜接滑動 |
3.text 組件的基本使用
文本組件
類似于 HTML 中的 span 標(biāo)簽，是一個行內(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;'>一級標(biāo)題 <h1>"></rich-text>
附：微信小程序輪播圖單獨添加圖片、修改輪播圖圖片、單獨修改某張圖片
<!--pages/swiper/swiper.wxml-->
<text>pages/swiper/swiper.wxml</text>
<!-- 滑塊視圖 先添加一個滑塊容器 -->
<!-- 是否自動播放 ，增加提示點 ，是否銜接滑動（例如從最后一張到第一張），提示點顏色 -->
<swiper
autoplay="{{false}}"
indicator-dots
circular
indicator-color="rgba(0,0,0,1)">
<!-- 添加一個內(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)給到本地數(shù)據(jù)庫data，并且命名ccc -->
</swiper-item >
</block>
</swiper>
<button bindtap="getImg">更改輪播圖的圖片</button>
<button bindtap="getc">在輪播圖最后面添加一個圖片</button>
<!-- 單獨換圖片 -->
<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)給到本地數(shù)據(jù)庫data，并且命名cc -->
</image>
</swiper-item >
</swiper>Page({
/**
* 頁面的初始數(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'], //是否用相機還是相冊
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'], //是否用相機還是相冊
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.拿到我點擊的圖片下標(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'], //是否用相機還是相冊
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，此時_this.data.imgArr[_this.data.pdd]=res.tempFilePaths[0]這行里的_this.data.pdd為輪播圖里的第幾個圖片，將要替換的圖片的數(shù)據(jù)，替換近imArr[]里的第幾個（_this.data.pdd）圖片，最后_this.setData進行替換
通過console.log輸出的數(shù)據(jù)，看到將下標(biāo)寫入了本地數(shù)據(jù)，并且命名為cc
總結(jié)
到此這篇關(guān)于微信小程序滾動、輪播圖和文本的文章就介紹到這了,更多相關(guān)微信小程序滾動 輪播圖 文本內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
做了一個判斷瀏覽器類型和版本號的業(yè)務(wù)，記錄下相關(guān)的js代碼，個人感覺還不錯，需要的朋友可以參考下2013-10-10
JS 實現(xiàn)導(dǎo)航欄懸停效果(續(xù))
上次導(dǎo)航欄懸停的那個頁面在IE上運行的時候，會出導(dǎo)航欄不停的抖動問題，在本文已有完美的解決方法，將導(dǎo)航欄的定位方式由原來的absolute改為fixed即可2013-09-09
為數(shù)據(jù)添加append,remove功能...2006-10-10
動態(tài)的改變IFrame的高度實現(xiàn)IFrame自動伸展適應(yīng)高度
動態(tài)的改變IFrame的高度，實現(xiàn)IFrame自動伸展，父頁面也自動神縮原理： 在IFrame子頁面一加載的時候，調(diào)用父IFrame對象，改變其高度2012-12-12
下面小編就為大家?guī)硪黄猨s 連續(xù)賦值的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
這篇文章主要介紹了js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法,實例分析了oninput與onpropertychange實現(xiàn)下拉框里自動匹配關(guān)鍵字實時監(jiān)聽文本框value值變化的功能,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JavaScript事件,告訴大家"事件對象"的注意要點，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了js文本框跑馬燈效果，功能實現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
今天小編就和大家深入學(xué)習(xí)JavaScript對象，感興趣的小伙伴們可以參考一下，大家一起學(xué)習(xí)。2015-10-10
js中有各種位置相關(guān)的屬性,平時用起來比較混亂,特此整理一下,下面這篇文章主要給大家介紹了關(guān)于js中易弄混淆的“位置”相關(guān)屬性的相關(guān)資料,需要的朋友可以參考下2022-04-04