小程序实现上下移动切换位置


Posted in Javascript onSeptember 23, 2019

 本文实例为大家分享了小程序实现上下移动切换位置的具体代码,供大家参考,具体内容如下

小程序实现上下移动切换位置

<view wx:for="{{companyData}}" wx:key="{{item.id}}" class="overHiden">
   <view class="floarLeft">{{item.name}}</view>
   <view class="floarRight" wx:if="{{index != 0}}" data-index="{{index}}" bindtap="topClick">
   <image src="../../images/32.png" class="rightmenuImg"></image>
   </view>
   <view class="floarRight" wx:if="{{index != companyData.length-1}}" data-index="{{index}}" bindtap="bottomClick">
   <image src="../../images/33.png" class="rightmenuImg"></image>
   </view>
</view>
data{
 companyData:[
  {
   id:0,
   name:'产品1'
  },
  {
   id:1,
   name:'产品2'
  },
  {
   id:2,
   name:'产品3'
  },
  {
   id:3,
   name:'产品4'
  },
  {
   id:4,
   name:'产品5'
  }
 ]
}
//位置向上移动
topClick: function(e) {
 var that = this
 var index = e.currentTarget.dataset.index
 var one = that.data.companyData[index]
 var two = that.data.companyData[index - 1]
 var index2 = index - 1
 var data1 = "companyData[" + index + "]"
 var data2 = "companyData[" + index2 + "]"
 that.setData({
  [data1]: two,
  [data2]: one
 })
 },
 // 位置向下移动
 bottomClick: function(e) {
 var that = this
 var index = e.currentTarget.dataset.index
 var one = that.data.companyData[index]
 var two = that.data.companyData[index + 1]
 var index2 = index + 1
 var data1 = "companyData[" + index + "]"
 var data2 = "companyData[" + index2 + "]"
 that.setData({
  [data1]: two,
  [data2]: one
 })
 }

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

Javascript 相关文章推荐
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
react redux入门示例
Apr 19 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 #Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 #Javascript
layer扩展打开/关闭动画的方法
Sep 23 #Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 #Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 #Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 #Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 #Javascript
You might like
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
js实现返回顶部效果
2017/03/10 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python实现多线程抓取妹子图
2015/08/08 Python
图文详解WinPE下安装Python
2016/05/17 Python
深入理解Django的自定义过滤器
2017/10/17 Python
python版飞机大战代码分享
2018/11/20 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python的logging模块基本用法
2020/12/24 Python
PHP高级工程师面试问题推荐
2013/01/18 面试题
项目施工员岗位职责
2014/03/09 职场文书
售房委托书
2014/08/30 职场文书
护士医德考评自我评价
2015/03/03 职场文书
演讲比赛主持词
2015/06/29 职场文书
古诗之感恩老师
2019/10/24 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS