当前位置:首页 > 日记 > 正文

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

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

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

图片左右滑动效果图:

wxml代码:

<scroll-view scroll-x="true"> <view class="uploadWrap" scroll-x="true">  <view class="upload_Item">   <image class="upload_Item_img" src="../../image/test1.webp"></image>  </view>  <view class="upload_Item">   <image class="upload_Item_img" src="../../image/test2.webp"></image>  </view>  <view class="upload_Item">   <image class="upload_Item_img" src="../../image/test3.webp"></image>  </view>  <view class="upload_Item">   <image class="upload_Item_img" src="../../image/test4.webp"></image>  </view>  <view class="upload_Item">   <image class="upload_Item_img" src="../../image/test1.webp"></image>  </view>  <view class="upload_Item">   <image class="upload_Item_img" src="../../image/test2.webp"></image>  </view>  <view class="upload_Item">   <image class="upload_Item_img" src="../../image/test3.webp"></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> 

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

相关文章

word2007制作公司组织结构图的两种

word2007制作公司组织结构图的两种

公司,方法,结构图,两种,电脑软件,  公司组织结构图是很多企业需要用到的资料,我们可以借助WORD2007提供的SmartArt功能,迅速的画出组织结构图。那么下面就由小编给大家分享下用WORD2007制作公司组织结构图的技巧,希望能帮助到您。制作公司组…

微信公众平台刮刮卡如何设置

微信公众平台刮刮卡如何设置

微信公众平台,如何设置,刮刮卡,电脑软件,  下最简单,最快速的微信刮刮卡制作方法。微信刮刮卡是一把营销的利剑,但是如何用最少的资金做一个微信刮刮卡呢,今天小编在这里就和大家分享一下最简单,最快速的微信刮刮卡制作方法。微信公众平台刮…

ES6下React组件的写法示例代码

ES6下React组件的写法示例代码

示例代码,组件,写法,电脑软件,React,本文主要跟大家分享了ES6下React组件的写法示例,下面来一起看看详细的介绍:一:定义React组件class Hello extends React.Component { render() { return <h1>Hello, {this.props.value}</h1>; }}二:声明pro…

怎么在excel2007设置宏在excel2007

怎么在excel2007设置宏在excel2007

设置,步骤,方法,电脑软件,  Excel 电子表格处理软件中有一个宏选项,功能非常强大,一般默认是关闭状态。有的朋友在收到一些电子表格软件时,提示需要启用宏选项才可以打开。下面小编教你怎么在excel2007中打开宏,希望对你有帮助!excel2007中设…

WPS演示如何插入页码WPS演示插入页

WPS演示如何插入页码WPS演示插入页

方法,页码,演示,电脑软件,WPS,  在使用WPS演示制作幻灯片时,有时需要在幻灯片里插入页码,那么怎么在幻灯片里插入页码呢?下面小编教你怎么做吧。wps演示插入页码的方法首先在电脑上打开wps演示软件,并新建一个空白文档,如下图所示。wps演示插…

ppt如何给幻灯片设置背景

ppt如何给幻灯片设置背景

方法,设置,幻灯片,背景,电脑软件,  我们有时需要在ppt上添加背景,应该怎么做呢?一份好的PPT不仅可以吸引观众的眼球同时还可以反映自己的制作能力,下面就让小编告诉你ppt添加幻灯片背景的方法,希望小编整理的资料对大家有帮助。ppt幻灯片添…

word2017打不开怎么办

word2017打不开怎么办

解决方法,打开文件,打不开,电脑软件,  很多朋友在更新了word2017之后,打开文件时都会出现错误,遇到这些问题怎么解决呢?下面给大家分享word2017打开文件出错的解决方法。word2017打开文件出错的解决方法1、新建空白Word文档,如下图&mdash;&m…

JavaScript数据结构之双向链表和双

JavaScript数据结构之双向链表和双

数据结构,双向循环链表,双向链表,电脑软件,JavaScript,双向链表和普通链表的区别在于,在链表中,一个节点只有链向下一个节点的链接,而在双向链表中,链接是双向的:一个链向下一个元素,另一个链向前一个元素。 双向链表提供了两种迭代列表的方法:从…

Javascript | es2016 import和requ

Javascript | es2016 import和requ

详解,区别,电脑软件,Javascript,require,本文介绍了Javascript(es2016) import和require用法和区别详解,分享给大家,具体如下:写个简单js文件,假设名字为:lib.js 。 假设内容如下:export const sqrt = Math.sqrt;export function square(x) { ret…

excel表格设置页码的教程

excel表格设置页码的教程

教程,设置,页码,表格,电脑软件,  Excel中的表格该如何设置页码呢?接下来是小编为大家带来的excel表格设置页码的教程,供大家参考。excel表格设置页码的教程:  设置页码步骤1:点击&ldquo;页面布局&rdquo;下&ldquo;页面设置&rdquo;中右下角…

Excel表格数据怎么使用内容重排的

Excel表格数据怎么使用内容重排的

重排,数据,表格,功能,内容,  在网站上搜索到要找的数据,却发现复制到excel中数据全部挤在一个单元格中。 这样也就无法对数据进行处理。如果解决数据挤在一行的问题!答案是用EXCEL内容重排功能!内容重排的功能就是将一个单元格的内容按照…

excel2007 保存工作区教程

excel2007 保存工作区教程

教程,工作区,电脑软件,  在Excel中往往不能在当天完成工作需要第二天继续完成,这个时候就要把工作簿保存为工作区了,想必有些朋友会不太懂,不过没关系,我们一起来学习一下如何保存工作区。下面是小编带来的关于excel2007 保存工作区教程,希望…

软件日记