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


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 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
浅析Ajax语法
Dec 05 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
vue 父组件中调用子组件函数的方法
Jun 06 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
全国中波电台频率表
2020/03/11 无线电
php断点续传之如何分割合并文件
2014/03/22 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python采集微信公众号文章
2018/12/20 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
保护环境建议书100字
2014/05/13 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
新生入学欢迎词
2015/01/26 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
用Python创建简易网站图文教程
2021/06/11 Python