微信小程序：使用拖动（touchstart、touchmove、touchend）以及 scroll-view 实现 下拉加载上一项导航，上拉加载下一导航功能；

最新推荐文章于 2024-03-15 13:20:27 发布
最新推荐文章于 2024-03-15 13:20:27 发布
阅读量4k 收藏 7
点赞数 3
分类专栏： 小程序 js方法 文章标签： 前端 小程序 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43233137/article/details/104499515
版权

页面大致
在这里插入图片描述

页面布局

<!--pages/shop/index.wxml-->
<view class="wrap">
  <view class="shop-search">
    <view class="search-box">
      <image src="/images/search.png"></image>
      <input class="text-light-gray" value="请输入关键字……" disabled="true" bindtap="gotoSearch"></input>
    </view>
    <view class="shop-cart" bindtap="gotoCart">
      <image src="/images/cart.png"></image>
      <view class="cart-num"><point num="{{cartNumber}}"></point></view>
    </view>
  </view>
  <view class="shop-list">
    <view class="shop-list-left">
      <block wx:for="{{navData}}">
        <view class="list-left-item {{activeIndex==index?'list-left-item-active':''}}" bindtap="changeNav" data-id="{{item.id}}" data-index="{{index}}">{{item.name}}</view>
      </block>
    </view>
    <scroll-view 
      bindtouchstart="touchstart" bindtouchend="touchend" bindtouchmove="touchmove" 
      bindtouchcancel="touchcancel"
      wx:if="{{goodsData.length>0}}" 
      class="shop-list-right"
      scroll-y
      scroll-top="{{scroll}}"
      scroll-y="true"
      upper-threshold="30"
      lower-threshold="30"
      bindscroll="bindscroll"
      bindscrolltoupper="refresh" 
      bindscrolltolower="loadMore"
      >
        <view wx:if="{{!slide_s && activeIndex !=0}}" class="list_item_slide">下拉继续浏览{{navData[activeIndex-1].name}}</view>
        <block wx:for="{{goodsData}}" wx:key="i">
          <view class="list-right-item" data-id="{{item.id}}" bindtap="gotoDetails">
              <view class="right-item-img">
                <image src="{{item.image!=''?item.image:'/images/no_pic.png'}}" mode="aspectFit" lazy-load='true'></image>
              </view>
              <view class="right-item-info">
                <view class="item-info-til font-small">【美汁源果粒橙】1.8L</view>
                <view class="item-info-sales"><text class="font-bigger text-red">¥48.00</text>
                  <text class="font-mini text-light-gray">已售：999份 </text>
                </view>
                <view class="item-info-msg font-mini text-light-gray">
                  <text>999条评价</text>
                  <text>好评率：99%</text>
                </view>
              </view>
          </view>
        </block>
        <view  class="list_item_slide2">
          <text wx:if="{{!slide_x && activeIndex + 1 != navData.length}}">加载中...</text>
        </view>
    </scroll-view>
    <view 
      bindtouchstart="touchstart" bindtouchend="touchend" bindtouchmove="touchmove"
      bindtouchcancel="touchcancel" 
      class="shop-list-right flex"  wx:else>
      <!-- wx:if="{{!slide && activeIndex !=0}}"  -->
      <view wx:if="{{!slide_s && activeIndex !=0}}" class="list_item_slide1">下拉继续浏览{{navData[activeIndex-1].name}}</view>
      <image class="no-data" src="/images/no_data2.png"></image>
      <view wx:if="{{!slide_x && activeIndex + 1 != navData.length}}" class="list_item_slide3">加载中...</view>
    </view>
  </view>
</view>

css


/**shop.wxss**/
/* 商城搜索样式 */
.shop-search{
  overflow: hidden;
  padding: 25rpx;
  display: flex;
}
.search-box{
  flex: 1;
  height:58rpx;
  background:rgba(245,245,245,1);
  border-radius:30rpx;
  padding-left: 28rpx;
  display: flex;
  align-items: center;
}
.search-box image{
  width: 30rpx;
  height: 30rpx;
  margin-right: 18rpx;
}
.search-box input{
  flex: 1;
  font-size: 20rpx;
}
.shop-cart{
  position: relative;
  margin-right: 18rpx;
  margin-left: 36rpx;
  display: flex;
  align-items: center;
}
.shop-cart image{
  width: 34rpx;
  height: 34rpx;
}
.shop-cart .cart-num{
  position: absolute;
  right: 2rpx;
  top:15rpx;
}
/* 商城首页列表样式*/
.shop-list{
  flex: 1;
  display: flex;
}
.shop-list-left,.shop-list-right{
  max-height: 100%;
  overflow: auto;
}
.shop-list-left{
  width: 163rpx;
  margin-right: 42rpx;
  background:rgba(250,250,250,1);
}
.list-left-item{
  line-height: 85rpx;
  height: 85rpx;
  text-align: center;
}
.list-left-item-active{
  color: #F22510;
  background: #fff;
}
.shop-list-right{
  flex: 1;
}
.list-right-item{
  padding: 36rpx 0;
  overflow: hidden;
  border-bottom: 2rpx solid #f5f5f5;
  display: flex;
}
.right-item-img{
  width: 180rpx;
  display: flex;
  align-items:center;
}
.right-item-img image{
  width: 100%;
  height: 180rpx;
}
.right-item-info{
  flex: 1;
  margin-left: 18rpx;
  margin-right: 25rpx;
}
.item-info-til{
  color:rgba(51,51,51,1);
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.item-info-type{
  background:linear-gradient(135deg,rgba(248,65,76,1) 0%,rgba(224,82,33,1) 100%);
  border-radius:4rpx;
  width:56rpx;
  color:#fff;
  text-align: center;
  font-size: 18rpx;
}
.item-info-sales,.item-info-msg{
  display: flex;
  line-height: 52rpx;
}
.item-info-sales .font-mini,.item-info-msg text:last-child{
  flex: 1;
  text-align: right;
}
.item-info-msg{
  line-height: 30rpx;
}
/*  */
.no-data{
  width: 188rpx;
  height: 188rpx;
  margin: 0 auto;
}
.discuss-pic{
  width:181rpx;
  height:181rpx;
  border-radius: 10rpx;
  margin-right: 36rpx;
}
/*  */
.font30{
  font-size: 30rpx;
}
/*商品详情页底部固定条*/
.shop-details-fixed{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vmin;
  height: 112rpx;
  background: #fff;
  box-shadow:0px -1px 2px 0px rgba(0,0,0,0.18);
}
.btn-box .btn{
  float: right;
  width: 182rpx;
  height: 62rpx;
  line-height: 62rpx;
  text-align: center;
  border-radius: 30rpx;
  margin-right: 20rpx;
}
.buyBtn{
  margin-right: 27rpx;
  background:linear-gradient(135deg,#F77300 0%,#F22510 100%);
  box-shadow:0px -1px 2px 0px #F77300;
}
.addBtn{
  background:linear-gradient(135deg,#FFD94C 0%,#FFB919 100%);
  box-shadow:0px -1px 2px 0px #FFD94C;
}
/* 购物车列表、、、下单列表 */
.cart-list{
  background: #fff;
  padding: 0 34rpx;
}
.list-item{
  padding: 36rpx 0;
  border-bottom: 2rpx solid #eee;
}
.item-img,.item-img image{
  width:181rpx;
  height:181rpx;
  border-radius: 10rpx;
}
.item-info,.item-info-sales .price-cut{
  flex: 1;
}
.item-info-sales{
  padding-top: 52rpx;
}
/* 商品评价 */
/*  */
.shop-detail-discuss{
  overflow: hidden;
  padding: 0;
  background: #fff;
}
.discuss-til{
  padding: 8rpx 20rpx 16rpx;
}
.discuss-til .discuss-til-left{
  flex: 1;
  padding-left: 30rpx;
  position: relative;
}
.discuss-til-left::before{
  position: absolute;
  content: '';
  left:0;
  top:50%;
  width: 12rpx;
  height: 34rpx;
  background: #F7231F;
  margin-top: -17rpx;
}
.discuss-til-left text{
  padding-left: 10rpx;
  font-weight: 400;
}
.discuss-til-right{
  margin: 0 8rpx;
}
.discuss-til-right image{
  width: 10rpx;
  height: 16rpx;
  margin-left: 20rpx;
}
/*  */
.logo{
  width: 92rpx;
  height: 92rpx;
  border-radius: 50%;
  margin-right: 18rpx;
}
.discuss-item-info,.discuss-item-info text:first-child{
  flex: 1;
}
.discuss-item{
  border-bottom: 18rpx solid #FAFAFA;
  padding-top: 0;
}
.discuss-item-info {
  line-height: 26rpx;
  padding: 16rpx 0;
}
.discuss-item-info .flex{
  margin-bottom: 10rpx;
}
.discuss-item-center{
  margin: 25rpx 0;
  line-height:30rpx;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.discuss-item-pic{
  overflow: hidden;
  padding-bottom: 26rpx;
}



/* pages/shop/index.wxss */
/* page{
  height: 100vmax;
} */
.wrap{
  display: flex;
  flex-direction: column;
  height: 100vmax;
  background: #fff;
}
/*  */
.shop-scroll{
  width: 100vmin;
  height: 322rpx;
  background: pink;
}
/*  */
.item-info-sales .text-gray {
  padding-left: 12rpx;
}
/* .item-info-sales .price-cut:last-child .price-first{
  font-size: 24rpx;
} */

.shop-list-right{
  position: relative;
}

.list_item_slide,.list_item_slide1{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: rgba(200, 200, 200, 1);
  animation: list_item_slide 0.3s ease-in-out ;
}
.list_item_slide1{
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: rgba(200, 200, 200, 1);
  animation: list_item_slide 0.3s ease-in-out ;
}
.list_item_slide2{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  z-index: 3001;
  color: rgba(200, 200, 200, 1);
  margin-top: 10rpx;
  margin-bottom: 40rpx;
  animation: list_item_slide 0.3s ease-in-out ;
}
.list_item_slide3{
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  z-index: 3001;
  color: rgba(200, 200, 200, 1);
  margin-bottom: 5rpx;
  animation: list_item_slide 0.3s ease-in-out ;
}

@keyframes list_item_slide {
  0% {
    transform: translateY(-5px);
    opacity: 0;
  }
  /* 50% {
    transform: translateY(0);
    opacity: 1;
  } */
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

js

 // pages/shop/index.js
const app = getApp()
const urls = require('../../utils/link.js')
var t  
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navData: [{
			"id": 12,
			"name": "零食乳饮",
			"sort": 4
		}, {
			"id": 13,
			"name": "米面粮油",
			"sort": 3
		}, {
			"id": 14,
			"name": "洗护美妆",
			"sort": 2
		}],
    activeIndex:0,
    goodsData:[
    ],         // 当前显示的数组
    goodsTotal:[
    [{
		"id": 29,
		"name": "【美汁源果粒橙】1.8L",
		"type": "自营",
		"image": "",
		"group_id": 12
	}, {
		"id": 30,
		"name": "【蒙牛纯牛奶】250ml*24",
		"type": "自营",
		"image": "",
		"group_id": 12
	}, {
		"id": 32,
		"name": "【娃哈哈AD钙奶】220g*24瓶",
		"type": "自营",
		"image": "",
		"group_id": 12
	}, {
		"id": 27,
		"name": "八宝粥",
		"type": "自营",
		"image": "",
		"group_id": 12
	},
    ],[ {
		"id": 32,
		"name": "【娃哈哈AD钙奶】220g*24瓶",
		"type": "自营",
		"image": "",
		"group_id": 13
	}, {
		"id": 27,
		"name": "八宝粥",
		"type": "自营",
		"image": "",
		"group_id": 13
	},{
		"id": 32,
		"name": "【娃哈哈AD钙奶】220g*24瓶",
		"type": "自营",
		"image": "",
		"group_id": 13
	}, {
		"id": 27,
		"name": "八宝粥",
		"type": "自营",
		"image": "",
		"group_id": 13
	},{
		"id": 32,
		"name": "【娃哈哈AD钙奶】220g*24瓶",
		"type": "自营",
		"image": "",
		"group_id": 13
	}, {
		"id": 27,
		"name": "八宝粥",
		"type": "自营",
		"image": "",
		"group_id": 13
	}, ],
    ],        // 暂存的数据
    cartNumber:0,
    isVip:2,
    scrollTop: 0,           // 储存滚动位置
    slide: true,            // 当前是否可以拖动 默认为真
    slide_s: true,         // 上方
    slide_x: true,         // 下方
    scroll: 0,        // 滑动距离
    scroll_top: true,       // 是否滑动到了顶部
    down: false,             // 是否滑动到了底部
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.getData();
    this.setData({
		goodsData: this.data.goodsTotal[0]
	})
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   // if(app.globalData.userInfo){
     // this.cartNumber();
   // }
  },
  onReady: function () {
    
  },
  //切换商品分类
  changeNav(e,item){
  	// 此处为 切换 分类&导航
  	// 并进行遍历 查看是否储存本地缓存
  	let that=this;
    let _dat = {};
    if(e != null){
      _dat = e.currentTarget.dataset;
    }else{
      _dat = item;
    }
    // console.log(_dat)
    let _id = _dat.id;
    let _index=_dat.index;
    that.setData({
      activeIndex:_index,
      groupId: _id,
    });
    let goodsData = [];
    let _goodsTotal = that.data.goodsTotal;
    let Len = _goodsTotal.length;         // 
    // that.getGoods();
    // console.log(_goodsTotal.length ,that.data.goodsTotal,that.data.navData)
    if (Len < that.data.navData.length){
      if(_goodsTotal.length > 0){

      }else{
        that.getGoods();
        return 
      }
      for (let i = 0; i < Len;i++){
        if (_goodsTotal[i] ){
            if (_id == _goodsTotal[i][0].group_id) {
              goodsData = _goodsTotal[i]
            }
        }
      }
    }else{
      console.log(2)
      for (let i = 0; i < Len; i++) {
        if (_goodsTotal[i].length > 0) {
          if (_id == _goodsTotal[i][0].group_id) {
            goodsData = _goodsTotal[i]
          }
        }else{
          that.getGoods();
        }
      }
    }
    if(goodsData.length > 0){     // 
      this.setData({
        goodsData: goodsData
      })
      setTimeout(()=>{
        this.setData({
          slide: true,
          slide_s: true,
          slide_x: true,
          scroll_top: true,
          down: false,
          scroll: 0,
          scrollTop: 0,
        })
      },200)
    }else{      // 如果为空 说明此 数组 没有数据 或者没有获取过
      console.log('没有数据 或 没有被获取过');      
      that.getGoods();
    }
  },

  //获取数据
  getData(){
  	// 获取导航栏
  },
  //根据群组id获取商品
  getGoods(){
    //  请求 商品
  },
  cartNumber(){    
    let that=this;
    app.request(urls.cartNumber, {
    }, (res) => {
      // 成功
      if(res.rc == 200){
        that.setData({
          cartNumber: res.data.cart_number
        });
      }else{
        
      }
    }, (res) => {
      // 失败
    }, (res) => {
      // 请求结束
    })
  },
  //跳转到详情页
  gotoDetails(e){
    wx.navigateTo({
      url: 'detail/index?id=' + e.currentTarget.dataset.id
    })
  },
  //跳转到查询页面
  gotoSearch(){
    wx.navigateTo({
      url: 'search/index?cartNum=' + this.data.cartNumber
    })
  },
  //跳转到购物车
  gotoCart() {
    // 检验是否登录
    let url = '/pages/shop/index';
    let url1 = '/pages/shop/cart/index';
    app.loginOfButton(userInfo => {
      wx.navigateTo({
        url: url1
      })
    }, url, 2);
  },
  // 上部下拉
  refresh(e){
    // console.log(this.data.startX)
    // this.setData({
    //   startX: e.changedTouches[0].clientX,
      
    //   startY: e.changedTouches[0].clientY,
    // })
  },
  // 底部上拉
  loadMore(e){
    this.setData({
      down: true
    })
  },

  //手指触摸动作开始 记录起点X坐标
  touchstart: function (e) {
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
    })
    if(this.data.goodsData.length<3){
      this.setData({
        scroll_top: true,
        down: true,
      })
    }
    console.log('触摸动作开始')
  },
//滑动事件处理
  touchmove: function (e) {
    var that = this,

    scroll_top = that.data.scroll_top,
    
    down = that.data.down,      

    startX = that.data.startX,//开始X坐标
    
    startY = that.data.startY,//开始Y坐标
    
    touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
    
    touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
        
    //获取滑动角度
    
    angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });

    //滑动超过30度角 return
    console.log(angle,1111)
    if(!this.data.slide) return;      // 不为真
    if (Math.abs(angle) < 45) return;
    if (touchMoveY > startY ){
      console.log('上滑')
      this.setData({
        down: false
      })
    }
    if (touchMoveY > startY && scroll_top){
      // console.log('上滑')
      this.setData({
        slide: false,
        slide_s: false,
        down: false
      })
    } else if(down){   // 下滑
      console.log('下滑')
      this.setData({
        slide: false,
        slide_x: false,
      })
    }
    // if (touchMoveY > startY){
    //   // console.log('上滑')
    //   this.slide(1);
    // } else  {   // 下滑
    //   // console.log('下滑')
    //   this.slide(2);
    // }
    
    // if (Math.abs(angle) > 30) return;
    
    // if (touchMoveX > startX) //右滑
    
    // console.log('右滑')
    
    // else //左滑
    // console.log('左滑')
    
  },
  // 滑动结束
  touchend(e){
    // console.log(e)
    var that = this,

    scroll_top = that.data.scroll_top,
    
    down = that.data.down,    

    startX = that.data.startX,//开始X坐标
    
    startY = that.data.startY,//开始Y坐标
    
    touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
    
    touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
        
    //获取滑动角度
    
    angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });

    //滑动超过30度角 return
    // console.log(Math.abs(angle),1111)
    // if(!this.data.slide) return;      // 不为真
    if (Math.abs(angle) < 45) return;
    console.log(touchMoveY,startY,)
    if (touchMoveY > startY) {
      this.setData({
        down: false
      })

    }
    if (touchMoveY > startY && scroll_top){
      // console.log('上滑')
      this.slide(1);
    } else  if(down){   // 下滑
      // console.log('下滑')
      this.slide(2);
    }
    
    // if (Math.abs(angle) > 30) return;
    
    // if (touchMoveX > startX) //右滑
    
    // console.log('右滑')
    
    // else //左滑
    // console.log('左滑')
    
  },
  // 手指触摸动作被打断
  touchcancel(e){
    this.setData({
      slide: true,            // 当前是否可以拖动 默认为真
      slide_s: true,         // 上方
      slide_x: true,         // 下方
      scroll: 0,        // 滑动距离
      scrollTop: 0,
      scroll_top: true,       // 是否滑动到了顶部
      down: false,             // 是否滑动到了底部
    })
  },
  // 滑动 
  slide(type){
    console.log(type)
    // clearTimeout(t);
    clearInterval(t);
    let item = {},
    navData = this.data.navData,
    activeIndex = this.data.activeIndex,
    length = this.data.navData.length;
    if(type == 1){
      this.setData({
        slide: false,
        slide_s: false,
      })
    }else{
      this.setData({
        slide: false,
        slide_x: false,
      })
    }
    t = setTimeout(()=>{
      if(type == 1  && activeIndex !=0){
        console.log('夏花')
        item = {
          id : navData[activeIndex - 1].id,
          index: activeIndex - 1,
        }
        this.changeNav(null,item)
      }else if(type == 2 && activeIndex + 1 != length){
        console.log("赏花")
        item = {
          id : navData[activeIndex + 1].id,
          index: activeIndex + 1,
        }
        this.changeNav(null,item)
      }else{
        this.setData({
          slide: true,
          slide_s: true,
          slide_x: true,
        })
      }
    },300)
  },
  /**
  
  * 计算滑动角度
  
  * @param {Object} start 起点坐标
  
  * @param {Object} end 终点坐标
  
  */
    
  angle: function (start, end) {
    
    var _X = end.X - start.X,
    
    _Y = end.Y - start.Y
    
    //返回角度 /Math.atan()返回数字的反正切值
    // console.log(360 * Math.atan(_Y / _X) / (2 * Math.PI))
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  
  //监听屏幕滚动 判断上下滚动
  bindscroll(e){
    // 406
    // console.log(e,1547 - 1194)
    // console.log(e)
    let scroll_top = true;
    let scrollTop = this.data.scrollTop;
    if(e.detail.scrollTop>30){
      scroll_top = false;
    }else{
      scroll_top = true;
    }
    // console.log(scrollTop ,e.detail.scrollTop,'000000000000')
    if(scrollTop > e.detail.scrollTop){ // 说明是向上方滚动，向下方拉动 // 解决上拉商品列表至底部，再下拉错误加载下一导航问题；
      // console.log(1111111111)
      this.setData({
        down: false,
      })
    }
    this.setData({
      scroll_top: scroll_top,
      scrollTop: e.detail.scrollTop,
    })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

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

  }
})
_星
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序——监听页面滑动（二）判断用户在做向上滑动还是向下滑动（onScrollPage scroll-view）
aaa123aaasqw的博客
07-08 1028
在上期文章中，我们简单介绍了如何监听页面滑动，但是在文章的最后留下了一个问题。我们如何判断用户是在做上滑操作还是下滑操作？本期文章将用两种方法（onPageScroll或者touchstart、touchmove、touchend）解决这个问题。上滑和下滑的监听都实现了。下面我们简单介绍一下第二种方法。大，则用户是在向上滑动，反之则是向下滑动。事件来判断用户的滑动方向。事件中记录下手指触摸的位置。事件中记录下手指移动的位置。微信小程序中可以通过监听。
微信小程序 图片缩放拖动
08-21
微信小程序图片缩放 拖动，亲测可用（别人写的，拿来分享下）。因为小程序程序包大小有限制，把两个gif图片删除就行了，删除不影响使用
微信小程序实现拖拽功能
12-30
0}} bindtouchmove=touchmove catch:touchmove style=left:{{write[0]}}px;top:{{write[1]}}px;> // pages/cateDetaile/cateDetaile.js const app = getAp
touchstart、touchmove、touchend 实现移动端上的触屏拖拽
weixin_34315189的博客
03-03 326
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, u...
微信小程序 - 浮动按钮拖动功能
jerry_0_0的博客
11-08 958
小程序浮动按钮拖动功能 在开发过程中无意间想到了这个功能。一番查询之后找到这个功能相关的代码片段。拷贝过来之后各种报错，经过自己的整改以可以使用。 功能图片： 中间的微信按钮可以拖动 //.js 页面代码 Page({ data:{ // 浮动按钮样式 buttonTop: 0, buttonLeft: 0, windowHeight: '', w...
微信小程序实现图片的拖拽移动
最新发布
m0_62670368的博客
03-15 931
本文将手把手教你制作如何拖动图片，以及增加限制防止拖出界面外，以及在界面中输出图片的先后位置。
微信小程序 实现最简单的组件拖拽
q1076452761的博客
12-21 6668
背景 最近在自主学习微信小程序的开发；对于零基础入门(没有学习过前端)的我，查阅了许多微信小程序拖拽的实现，大部分要么实现起来太复杂了，要么封装组件太复杂了，附带了拖拽之后排序等功能；因此写下这篇个人觉得最好理解的 微信小程序元素拖拽的实现； 原理 这边采用了 微信小程序中的 bindtouchstart、bindtouchmove、bindtouchend 三兄弟 实现 开始触摸、触摸后移动、触摸结束；并加上一些坐标的转换，实现简单的 拖动功能； 第一步 touchStart 拖拽的开始 (一切尽在图中)
微信小程序长按拖拽排序
m0_55969466的博客
01-02 2493
微信小程序长按拖拽排序。
微信小程序新增的拖动组件movable-view使用教程
08-30
主要给大家介绍了微信小程序最近新增的拖动组件movable-view的简单使用教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
08-27
【Vue2.0 移动端下拉刷新与上拉加载更多实现】 在移动应用开发中，下拉刷新和上拉加载更多功能是常见的交互设计，用于更新数据和加载更多内容。Vue2.0 提供了一种优雅的方式来实现这些功能。下面我们将详细探讨如何...
微信小程序demo：全屏滚动动画
03-15
标题中的“微信小程序demo：全屏滚动动画”指的是一个关于微信小程序开发的示例项目，主要功能是实现全屏的滚动动画效果。在微信小程序中，这种效果常常用于提升用户体验，尤其是在展示产品或服务时，全屏滚动可以...
wechat-mini-demo:微信小程序 底部上拉下滑抽屉 (苹果地图)
05-04
wechat-mini-demo 小程序demo 底部可上下拖拽菜单
小程序拖拽排序，拿来即用
12-04
该代码涉及到多层算法，支持微信小程序拖拽排序及H5js拖拽排序，拿来即用。
微信小程序-微信小程序－汉字拼音右侧导航
08-06
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的、无需下载安装即可使用的在线应用服务。在这个“微信小程序-微信小程序－汉字拼音右侧导航”项目中，开发者构建了一个...
微信小程序---左滑删除.zip
02-21
"微信小程序---左滑删除"这个主题是关于在微信小程序中实现一个常见的用户界面功能：通过左滑操作触发删除动作。这个功能在很多应用中都能看到，比如消息列表、任务列表等，它提供了简洁且直观的用户交互。 实现...
手机端上拉加载下拉刷新效果实现.rar
10-17
在移动设备上，为了优化用户体验，常常需要在浏览网页或应用时实现“上拉加载”和“下拉刷新”的功能。这两个特性对于处理大量数据流或者实时更新信息的场景尤为重要，比如社交媒体、新闻聚合和电商应用。下面我们将...
微信小程序---小程序中实现拖拽功能
Cinderellahh92的博客
09-24 2319
wxml <view class="list"> <view class="warp warp-item" wx:for="{{typeList}}" wx:key="index"> <view class="icon" wx:if="{{edit}}" data-index="{{index}}" data-id="{{item.id}}" data-name="{{item.typeName}}" bindtap="del"> <imag.
微信小程序中的拖拽和缩放图片功能
迷迷糊糊，懵懵懂懂
12-29 1722
在现代的移动应用开发中，拖拽和缩放功能变得越来越重要。它们不仅使应用程序更具交互性，还为用户提供了更直观、更高效的使用体验。微信小程序作为一个流行的开发平台，也提供了这样的功能。以下是在微信小程序中实现拖拽和缩放图片的步骤和注意事项。
微信小程序之可拖动悬浮按钮的实现
热门推荐
蒋蒋
03-21 1万+
微信小程序之可拖动悬浮按钮的实现 什么都不说先看效果图 下面上代码 wxml <button catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;width: 50px;heig...
微信小程序不用scroll-view实现滚动
06-01
除了使用`scroll-view`组件来实现滚动外，微信小程序还提供了一种不用`scroll-view`组件的方式来实现滚动，即使用`transform`属性来实现。 具体实现方法是，在需要滚动的元素上添加一个`transform: translateY()`样式，并且在JS文件中监听`touchstart`、`touchmove`、`touchend`事件，通过计算手指移动的距离来实现元素的滚动。 下面是一个示例代码： ``` <view class="container" style="transform: translateY({{scrollTop}}px);"> <view class="item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view> </view> ``` 在上面的代码中，我们在一个`<view>`元素上添加了`transform: translateY()`样式，并使用`{{scrollTop}}`来动态计算滚动的距离。 在JS文件中，我们需要定义`touchstart`、`touchmove`、`touchend`事件的监听器，并在其中实现滚动逻辑： ``` Page({ startY: 0, moveY: 0, distanceY: 0, scrollTop: 0, onTouchStart: function(e) { this.startY = e.touches[0].clientY }, onTouchMove: function(e) { this.moveY = e.touches[0].clientY this.distanceY = this.moveY - this.startY this.scrollTop += this.distanceY this.startY = this.moveY this.setData({ scrollTop: this.scrollTop }) }, onTouchEnd: function(e) { // 处理滚动结束事件 } }) ``` 在上面的代码中，我们定义了一个名为`onTouchStart`的函数来处理`touchstart`事件，并记录手指触摸的起始位置。同时，我们还定义了一个名为`onTouchMove`的函数来处理`touchmove`事件，并计算手指移动的距离，并通过`setData`方法将`scrollTop`属性更新为新的滚动距离。最后，我们还定义了一个名为`onTouchEnd`的函数来处理`touchend`事件，并在其中处理滚动结束的逻辑。 需要注意的是，使用`transform`属性来实现滚动的方式，需要手动处理滚动的逻辑，相对于使用`scroll-view`组件来说，实现起来更加复杂。同时，由于使用了`transform`属性，可能会导致一些性能问题，需要根据实际情况进行优化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值