小程序实现上下切换位置


Posted in Javascript onNovember 16, 2020

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

小程序上下切换位置

wxml

<view wx:for="{{companyData}}" wx:key="index" class="overHiden">
 <view class="floarLeft">{{item.name}}</view>
 <view class="floarRight" wx:if="{{index != 0}}" data-index="{{index}}" bindtap="topClick">
 上
 </view>
 <view class="floarRight" wx:if="{{index != companyData.length-1}}" data-index="{{index}}" bindtap="bottomClick">
 下
 </view>
</view>

js:

// pages/yidong/yidong.js
Page({

 /**
 * 页面的初始数据
 */
 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
 })
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

以上仅供参考,方便大家学习!!

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
checkbox使用示例
Aug 23 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
浅谈Vue的响应式原理
May 30 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
小程序实现点击tab切换左右滑动
Nov 16 #Javascript
微信小程序实现滚动Tab选项卡
Nov 16 #Javascript
小程序实现tab标签页
Nov 16 #Javascript
vue+Element-ui实现登录注册表单
Nov 17 #Javascript
Vue+Element-U实现分页显示效果
Nov 15 #Javascript
vue+Element-ui前端实现分页效果
Nov 15 #Javascript
vue+Element-ui实现分页效果
Nov 15 #Javascript
You might like
php生成唯一的订单函数分享
2015/02/02 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
php析构函数的简单使用说明
2015/08/24 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
简单的分页代码js实现
2016/05/17 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
Python的词法分析与语法分析
2013/05/18 Python
跟老齐学Python之list和str比较
2014/09/20 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python中作用域的深入讲解
2018/12/10 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
python mock测试的示例
2020/10/19 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
古驰英国官网:GUCCI英国
2020/03/07 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
清洁工岗位职责
2014/01/29 职场文书
医院工作检讨书范文
2014/02/10 职场文书
家长会学生演讲稿
2014/04/26 职场文书
家属慰问信
2015/02/14 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
老人与海读书笔记
2015/06/26 职场文书
军训决心书范文
2015/09/22 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript