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


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 相关文章推荐
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
React组件生命周期详解
Jul 03 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
微信小程序实现电影App导航和轮播
Nov 30 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
ECMAScript 基础知识
2007/06/29 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python递归函数绘制分形树的方法
2018/06/22 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python实现图片横向和纵向拼接
2020/03/05 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
新闻专业本科生的自我评价分享
2013/11/20 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python