小程序实现上下切换位置


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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
jquery图片放大镜效果
Jun 23 jQuery
在js中修改html body的样式
Nov 11 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 数字左侧自动补0
2008/03/31 PHP
PHP基础知识回顾
2012/08/16 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python Flask基础教程示例代码
2018/02/07 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python3转换code128条形码的方法
2019/04/17 Python
python如何删除文件中重复的字段
2019/07/16 Python
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
思想品德自我鉴定
2013/10/12 职场文书
股份合作协议书范本
2014/04/14 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
消防宣传标语大全
2015/08/03 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android