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


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 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
php7下的filesize函数
2019/09/30 PHP
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python实现excel转sqlite的方法
2017/07/17 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
解决Django连接db遇到的问题
2019/08/29 Python
python命令 -u参数用法解析
2019/10/24 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
python识别验证码图片实例详解
2020/02/17 Python
python中pivot()函数基础知识点
2021/01/03 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
自主招生自荐书
2013/11/29 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
迎国庆演讲稿
2014/09/15 职场文书
员工工作及收入证明
2014/10/28 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
单位更名证明
2015/06/18 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
mysql配置SSL证书登录的实现
2021/09/04 MySQL