微信小程序图片横向左右滑动案例


Posted in Javascript onMay 19, 2017

本文实例为大家分享了微信小程序图片左右滑动的具体代码,供大家参考,具体内容如下

图片左右滑动效果图:

微信小程序图片横向左右滑动案例

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从后台获取数据代码:

<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>

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
js时间控件只显示年月
Jan 08 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
layui导航栏实现代码
May 19 #Javascript
详解AngularJS controller调用factory
May 19 #Javascript
layer弹窗插件操作方法详解
May 19 #Javascript
layui选项卡效果实现代码
May 19 #Javascript
bootstrap table单元格新增行并编辑
May 19 #Javascript
layui弹出层效果实现代码
May 19 #Javascript
layui分页效果实现代码
May 19 #Javascript
You might like
php xml-rpc远程调用
2008/12/19 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP中使用BigMap实例
2015/03/30 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
laravel学习教程之存取器
2016/07/30 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
Python如何判断数独是否合法
2016/09/08 Python
Python 含参构造函数实例详解
2017/05/25 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
施工安全生产承诺书
2014/05/23 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
小学运动会开幕词
2015/01/28 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript