微信小程序圖片橫向左右滑動案例

更新時間：2017年05月19日 11:35:55 作者：東邊的小山

這篇文章主要為大家詳細(xì)介紹了微信小程序圖片橫向左右滑動的案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序圖片左右滑動的具體代碼，供大家參考，具體內(nèi)容如下

圖片左右滑動效果圖：

wxml代碼：

<scroll-view scroll-x="true"> 
<view class="uploadWrap" scroll-x="true"> 
 <view class="upload_Item"> 
 <image class="upload_Item_img" src="../../image/test1.jpg"></image> 
 </view> 
 <view class="upload_Item"> 
 <image class="upload_Item_img" src="../../image/test2.jpg"></image> 
 </view> 
 <view class="upload_Item"> 
 <image class="upload_Item_img" src="../../image/test3.jpg"></image> 
 </view> 
 <view class="upload_Item"> 
 <image class="upload_Item_img" src="../../image/test4.jpg"></image> 
 </view> 
 <view class="upload_Item"> 
 <image class="upload_Item_img" src="../../image/test1.jpg"></image> 
 </view> 
 <view class="upload_Item"> 
 <image class="upload_Item_img" src="../../image/test2.jpg"></image> 
 </view> 
 <view class="upload_Item"> 
 <image class="upload_Item_img" src="../../image/test3.jpg"></image> 
 </view> 
 
</view> 
</scroll-view>

wxss代碼：

.uploadWrap{height:160rpx; width:100%; display: flex; display: -webkit-box; flex-direction: column;} 
.upload_Item{ width: 160rpx; height: 160rpx; flex: 1;} 
.upload_Item_img{ width: 160rpx; height: 160rpx;}

wxml從后臺獲取數(shù)據(jù)代碼：

<scroll-view scroll-x="true"> 
 <view class="uploadWrap" scroll-x="true" > 
 <view class="upload_Item" wx:for="{{imgUrls}}" wx:key="id"> 
 <image class="upload_Item_img" src="{{item.imgurl}}"data-id="{{item.id}}" bindtap="changeMainImgFn2"></image> 
 <icon type="clear" size="16" class="upload_Btn" color="#f64400"></icon> 
 <view class="upload_mask {{upload_ImgSelId2==item.id? 'show':' ' }}">主圖</view> 
 </view> 
 </view> 
</scroll-view>

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)轉(zhuǎn)盤抽獎
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)轉(zhuǎn)盤抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
兩款JS腳本判斷手機瀏覽器類型跳轉(zhuǎn)WAP手機網(wǎng)站
本文通過兩款js腳本判斷手機瀏覽器類型跳轉(zhuǎn)到wap手機網(wǎng)站，感興趣的小伙伴快來學(xué)習(xí)吧
2015-10-10
js案例之鼠標(biāo)跟隨jquery版(實例講解)
下面小編就為大家?guī)硪黄猨s案例之鼠標(biāo)跟隨jquery版(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
手把手教你uniapp和小程序分包(圖文)
本文主要介紹了手把手教你uniapp和小程序分包，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
實現(xiàn)高性能javascript的注意事項
JavaScript代碼在web應(yīng)用程序中經(jīng)常用到，但是很多開發(fā)者忽視了一些性能方面的知識，如何編寫高性能javascript代碼呢？接下來，小編跟大家一起學(xué)習(xí)
2019-05-05
微信小程序?qū)崿F(xiàn)觸底加載
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)觸底加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
利用canvas中toDataURL()將圖片轉(zhuǎn)為dataURL(base64)的方法詳解
這篇文章主要給大家介紹了關(guān)于利用canvas中toDataURL()將圖片轉(zhuǎn)為dataURL(base64)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
JS實現(xiàn)響應(yīng)鼠標(biāo)點擊動畫漸變彈出層效果代碼
這篇文章主要介紹了JS實現(xiàn)響應(yīng)鼠標(biāo)點擊動畫漸變彈出層效果代碼,具有非常自然流暢的動畫過度效果,涉及JavaScript針對鼠標(biāo)事件的響應(yīng)及頁面元素樣式的動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-03-03
去除鏈接虛線全面分析總結(jié)
去除鏈接虛線全面分析總結(jié)...
2006-08-08
javascript每日必學(xué)之條件分支
javascript每日必學(xué)之條件分支，本文的主要內(nèi)容就是介紹的邏輯條件分支，循環(huán)，感興趣的小伙伴們可以參考一下
2016-02-02