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


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弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
AngularJS内置指令
Feb 04 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
js中跨域方法原理详解
Jul 19 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
Three.js基础学习教程
Nov 16 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
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安装问题
2006/10/09 PHP
一个多文件上传的例子(原创)
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php while循环控制的简单实例
2016/05/30 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
Js sort排序使用方法
2011/10/17 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
简单介绍Python中的几种数据类型
2016/01/02 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
24式加速你的Python(小结)
2019/06/13 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
12月红领巾广播稿
2014/02/13 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
设置IIS Express并发数
2022/07/07 Servers