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


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代码
Dec 15 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
JavaScript中while循环的基础使用教程
Aug 11 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
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删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
linux中cd命令使用详解
2015/01/08 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
Yii框架安装简明教程
2020/05/15 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
28个JS验证函数收集
2010/03/02 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
python聊天程序实例代码分享
2013/11/18 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
总经理助理的职责
2014/03/14 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
党性教育心得体会
2014/09/03 职场文书
刑事上诉状范文
2015/05/22 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript