小程序实现上下切换位置


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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
JavaScript 函数的执行过程
May 09 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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 面向对象实现代码
2009/11/11 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
解放web程序员的输入验证
2006/10/06 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
python图像和办公文档处理总结
2019/05/28 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python实现随机加减法生成器
2020/02/24 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
便利店促销方案
2014/02/20 职场文书
总经理岗位职责
2015/02/04 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
DE1103使用报告
2022/04/05 无线电