收藏
回答

cover-image加载得图片不能在安卓手机上滑动

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug cover-image 微信iOS客户端 7.0.5 2.8.3

cover-image加载得图片不能在安卓手机上滑动,在苹果手机上可以

回答关注问题邀请回答
收藏

3 个回答

  • 香烟陪伴青春
    香烟陪伴青春
    2019-12-12
    恢复聊天记录
    2019-12-12
    有用
    回复
  • 光见人吃肉,不见人挨揍
    光见人吃肉,不见人挨揍
    2019-11-07

       <view  bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">


              <image src="../../images/123456.jpg"  mode="aspecFit"  style="width: {{ touch.scaleWidth }}rpx;height: {{ touch.scaleHeight }}rpx"    bindload="bindload"  direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="10" scale-value="2"></image>


        </view>


    Page({


      data: {


        touch: {


          distance: 0,


          scale: 1,


         baseWidth: null,


         baseHeight: null,


          scaleWidth: null,


         scaleHeight: null


        }


      },


      touchstartCallback: function (e) {

        // 单手指缩放开始,也不做任何处理

        if (e.touches.length == 1) {

          console.log("单滑了")

          return

        }


       


        // 注意touchstartCallback 真正代码的开始 // 一开始我并没有这个回调函数,会出现缩小的时候有瞬间被放大过程的bug // 当两根手指放上去的时候,就将distance 初始化。

        let xMove = e.touches[1].clientX - e.touches[0].clientX;


        let yMove = e.touches[1].clientY - e.touches[0].clientY;


        let distance = Math.sqrt(xMove * xMove + yMove * yMove);


        this.setData({


          'touch.distance': distance,


        })


      },


      touchmoveCallback: function (e) {


        let touch = this.data.touch

         if (e.touches.length == 1) {

          console.log("单滑了");

          return

        }


        // 单手指缩放我们不做任何操作

        if(e.touches.length == 1)

        return console.log('双手指运动')


        let xMove = e.touches[1].clientX - e.touches[0].clientX;


        let yMove = e.touches[1].clientY - e.touches[0].clientY;


        // 新的 ditance

        let distance = Math.sqrt(xMove * xMove + yMove * yMove);


        let distanceDiff = distance - touch.distance;


        let newScale = touch.scale + 0.005 * distanceDiff


        // 为了防止缩放得太大,所以scale需要限制,同理最小值也是

        if(newScale >= 2) {


        newScale = 2


      }


            if(newScale <= 0.6) {


           newScale = 0.6


    }


    let scaleWidth = newScale * touch.baseWidth


    let scaleHeight = newScale * touch.baseHeight


    // 赋值 新的 => 旧的

    this.setData({


    'touch.distance': distance,


      'touch.scale': newScale,


        'touch.scaleWidth': scaleWidth,


          'touch.scaleHeight': scaleHeight,


            'touch.diff': distanceDiff


            })


        },


    bindload: function(e) {


      // bindload 这个api是<image>组件的api类似<img>的onload属性

      this.setData({


      'touch.baseWidth': e.detail.width,


        'touch.baseHeight': e.detail.height,


          'touch.scaleWidth': e.detail.width,


            'touch.scaleHeight': e.detail.height


    })


        }


    })

    为啥我的在苹果手机放大后可以移动, 安卓放大后不能移动

    2019-11-07
    有用
    回复
  • 灵芝
    灵芝
    2019-10-23

    这里的不能滑动是触摸在cover-image上无法滑动页面?

    2019-10-23
    有用
    回复 5
    • 光见人吃肉,不见人挨揍
      光见人吃肉,不见人挨揍
      2019-10-23
      嗯嗯
      2019-10-23
      回复
    • 灵芝
      灵芝
      2019-10-23回复光见人吃肉,不见人挨揍
      好的,这个问题后续修复,感谢反馈
      2019-10-23
      回复
    • 子木
      子木
      2019-12-09回复灵芝
      真机触摸在cover-image上无法滑动页面,都快过年了,这个bug还没有修复?
      2019-12-09
      回复
    • 瑞幸可以吗
      瑞幸可以吗
      2020-01-22
      我刚上线一个项目 发现没有修复 都取消掉了.....
      2020-01-22
      回复
    • 瓶子
      瓶子
      2020-06-01
      还没修复呀。。
      2020-06-01
      回复
登录 后发表内容
问题标签