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

2024-08-06 21:45:32

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

<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
  })
 }

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

微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat
微信小程序内拖动图片实现移动、放大、旋转的方法

屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法微信小程序这里提供了两个API wx.createContext() 创建并返回绘图上下文context对象 getActions 获取当前context上存储的绘图动作,对应wx.drawCanvas(object)中的actions clearActions 清空当前的存储绘图动作 wx.dra
小程序实现上下移动切换位置

本文实例为大家分享了小程序实现上下移动切换位置的具体代码,供大家参考,具体内容如下 <view wx:for="{{companyData}}" wx:key="{{item.id}}" class="overHiden"> <view class="floarLeft">{{item.name}}</view> <view class="floarRight" w
微信小程序实现tab左右切换效果

本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下分析 1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值. 2.swiper组件的current组件用于控制当前显示哪一页 3.swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页 wxml: <view class="record-box"> &
微信小程序tab左右滑动切换功能的实现代码

效果图: 一.简介自己的小程序需要实现这样的功能 1.核心思想 swiper 和scroll-view共用两个变量currentTab navScrollLeft,当点击nav或者滑动swiper时设置两个变量的值为当前的index 二.实现 tab导航栏使用<scroll-view>标签,内容使用<swiper> 1.wxml实现 <view class="container">  <!-- sc
详解微信小程序Radio选中样式切换

详解微信小程序Radio选中样式切换本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下:  <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi
微信小程序 swiper制作tab切换实现附源码

微信小程序 swiper制作tab切换实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view
微信小程序学习笔记之获取位置信息操作图文详解

本文实例讲述了微信小程序学习笔记之获取位置信息操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序文件上传.下载操作.这里分析一下获取位置信息操作. [获取当前位置信息]wx.getLocation() getlocation.wxml: <view> <button bindtap="getlocation">获取位置</button> </view> getlocation.js: Page({ getlocation: fu
微信小程序实现单选选项卡切换效果

这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法,供大家参考,具体内容如下效果如图: wxml: <view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"> <view class=
微信小程序实现tab页面切换功能

效果图如下所示: wxml <scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class="ip_tab_comtainer_padd"></view> <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}"&g
微信小程序页面滚动到指定位置代码实例

这篇文章主要介绍了微信小程序页面滚动到指定位置代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selectViewport().scrollOffset() query.select("#comment").boundingClientRe
微信小程序开发之路由切换页面重定向问题

这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigateTo(Object) 功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到当前页面. wx.navigateTo({ //当前页面对应的JS文件内控制模板 url: 'test?id=1' //需要切换到的页面路劲,此处为

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

相关推荐

随机推荐