小程序实现上下切换位置

 更新时间:2020年11月16日 08:52:55   作者:JSN___不像码农的码农  
这篇文章主要为大家详细介绍了小程序实现上下切换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

小程序上下切换位置

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 () {

 }
})

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

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

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

相关文章

  • js获取url参数值的几种方式详解

    js获取url参数值的几种方式详解

    这篇文章为大家主要介绍了js获取url参数值的几种方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-07-07
  • JavaScript中点击事件的写法

    JavaScript中点击事件的写法

    这篇文章主要介绍了JavaScript中点击事件的写法的相关资料,其中还给大家分享js触发按钮点击功能的实现,本文介绍的非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    这篇文章主要介绍了Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JavaScript实现流星雨效果的示例代码

    JavaScript实现流星雨效果的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现简易的流星雨的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序实现电子签名

    微信小程序实现电子签名

    这篇文章主要为大家详细介绍了微信小程序实现电子签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JS实现图片放大镜效果的方法

    JS实现图片放大镜效果的方法

    这篇文章主要介绍了JS实现图片放大镜效果的方法,实例分析了magnifier.js插件的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 网页自动跳转代码收集

    网页自动跳转代码收集

    网页自动跳转代码收集
    2009-09-09
  • js中json处理总结之JSON.parse

    js中json处理总结之JSON.parse

    parse是解析json数据多种方法中的其中一种。这篇文章主要介绍了js中json处理总结之JSON.parse,需要的朋友可以参考下
    2016-10-10
  • 使用javascript为网页增加夜间模式

    使用javascript为网页增加夜间模式

    如何给Web页面增加夜间模式功能? 其实所谓的夜间模式就是在页面上增加一个透明的遮罩层,但是遮罩层会挡住页面元素, 解决方法是 添加DIV,给DIV的outline属性一个很大的outline-width值,用outline的边框作为遮罩,这样既能正常点击页面元素,又能达到夜间模式的效果
    2014-01-01
  • createElement和onclick

    createElement和onclick

    createElement和onclick...
    2006-11-11

最新评论