微信小程序中的輪播圖實現(xià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 組件的常用屬性
屬性 | 類型 | 默認(rèn)值 | 說明 |
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>1777777</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進(jìn)行替換
通過console.log輸出的數(shù)據(jù),看到將下標(biāo)寫入了本地數(shù)據(jù),并且命名為cc
到此這篇關(guān)于微信小程序中的輪播圖實現(xiàn)示例的文章就介紹到這了,更多相關(guān)小程序輪播圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
uni-app使用uni-download和uni.saveFile下載保存文件遇到的問題及解決方法
這篇文章主要給大家介紹了關(guān)于uni-app使用uni-download和uni.saveFile下載保存文件遇到的問題及解決方法的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-01-01JavaScript 參數(shù)中的數(shù)組展開 [譯]
有些時候,我們需要把一個數(shù)組展開成多個元素,然后把這些元素作為函數(shù)調(diào)用的參數(shù).JavaScript中可以使用Function.prototype.apply來實現(xiàn)這種展開操作,但它不能被應(yīng)用在執(zhí)行構(gòu)造函數(shù)的情況下.本文解釋了什么是展開操作以及如何在使用new運算符的同時進(jìn)行展開操作2012-09-09后端代碼規(guī)范避免數(shù)組下標(biāo)越界
這篇文章主要為大家介紹了后端開發(fā)中的代碼如何規(guī)范避免數(shù)組下標(biāo)越界示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06微信小程序?qū)崿F(xiàn)自定義picker選擇器彈窗內(nèi)容
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義picker選擇器彈窗內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-07-07JAVASCRIPT style 中visibility和display之間的區(qū)別
visibility屬性用來確定元素是顯示還是隱藏的,這用visibility="visible|hidden"來表示(visible表示顯示,hidden表示隱藏)。2010-01-01