快捷導(dǎo)航

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

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

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

本文實例為大家分享了微信小程序圖片左右滑動的具體代碼，供大家參考，具體內(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)盤抽獎
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)轉(zhuǎn)盤抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
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和小程序分包，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
實現(xiàn)高性能javascript的注意事項
JavaScript代碼在web應(yīng)用程序中經(jīng)常用到，但是很多開發(fā)者忽視了一些性能方面的知識，如何編寫高性能javascript代碼呢？接下來，小編跟大家一起學(xué)習(xí)
2019-05-05
微信小程序?qū)崿F(xiàn)觸底加載
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)觸底加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
利用canvas中toDataURL()將圖片轉(zhuǎn)為dataURL(base64)的方法詳解
這篇文章主要給大家介紹了關(guān)于利用canvas中toDataURL()將圖片轉(zhuǎn)為dataURL(base64)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(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