收藏
回答

小白求问:this.setData更新后,为什么视图层没变化?

编写逻辑是:鼠标离开后,移动范围小于20px,则isopen不变,x位置回到原位置。结果实际运行的时候移动范围小于20时,鼠标离开后x直接停了。
let lasttouchX=0;
Page({
  _handlerstart:function(evt)
    lasttouchX=evt.changedTouches[0].pageX
  },
  _handlerend:function(evt){
    let newtouchX=evt.changedTouches[0].pageX;
    let cha=newtouchX-lasttouchX
    console.log(cha)
    if(cha<-20){
      this.setData({
        isopen: true,
      })
    }else if(cha>=20){
      this.setData({
        isopen: false,  
      })
    }else{
      this.setData({  
        isopen:this.data.isopen
      });
      console.log(this.data.isopen);
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
  isopen:true
  // 控制是否打开
  },


最后一次编辑于  06-17
回答关注问题邀请回答
收藏

3 个回答

  • dreamhunter
    dreamhunter
    06-17
    /**
     * 判断给定的当前坐标是否超出了相对于初始坐标的指定最大距离。
     *
     * @param {Array} currentCoord - 当前坐标点的数组,如:[x, y]
     * @param {Array} initialCoord - 初始坐标点的数组,如:[x, y]
     * @param {number} maxDistance - 允许的最大距离阈值
     * @returns {boolean} - 如果当前坐标超出最大距离则返回true,否则返回false
     */
    function hasExceededMaxDistance(currentCoord, initialCoord, maxDistance) {
      // 使用数组解构赋值,从currentCoord数组中分别获取x和y坐标值
      const [currentX, currentY] = currentCoord;
    
      // 同样,从initialCoord数组中获取其x和y坐标值
      const [initialX, initialY] = initialCoord;
    
      // 应用Math.hypot方法计算两点间的直线距离
      // 这是一个更简洁且避免手动进行平方和开方操作的方法
      const calculatedDistance = Math.hypot(currentX - initialX, currentY - initialY);
    
      // 检查计算出的距离是否大于允许的最大距离
      // 如果超出,返回true;否则,返回false
      return calculatedDistance > maxDistance;
    }
    
    // 示例使用
    let currentCoordExample = [15, 20]; // 假设的当前坐标
    let initialCoordExample = [10, 10]; // 假设的初始坐标
    let limitDistanceExample = 5;       // 设置的最大允许距离
    
    // 调用函数并打印结果
    let result = hasExceededMaxDistance(currentCoordExample, initialCoordExample, limitDistanceExample);
    console.log(`是否超出最大距离:` + result); // 输出判断结果
    
    06-17
    有用
    回复 5
    • 夜雪
      夜雪
      06-17
      this.setData({
              isopen:this.data.isopen
            });   我比较困惑的是为什么我这个更新后x的位置没有随着isopen的值变化
      06-17
      回复
    • dreamhunter
      dreamhunter
      06-17回复夜雪
      _handlerend 这个事件怎么来的,一般小程序移动端没有鼠标的概念,都是点击或者滑动.你做PC端的小程序?
      06-17
      回复
    • 夜雪
      夜雪
      06-17回复dreamhunter
      嗯嗯,我想表达的就是点击,然后离开这个时间端的滑动距离。_handlerend 就是点击结束离开的意思
      06-17
      回复
    • 夜雪
      夜雪
      06-17回复夜雪
      我大概明白了,好像是利用this.setData更新后isopen的数值没变,所以就没有重新渲染。我把他加感叹号取反就有反应了。
      06-17
      回复
    • 迪克
      迪克
      06-18
      this.setData({
              isopen:this.data.isopen
            });
      这句话的意思是吧isopen设置成data里isopen的值
      前面没有改变isopen的值 再怎么setdata也不会改变啊
      06-18
      回复
  • 迪克
    迪克
    06-17
    if(cha<-20){
    

    你这个判断是小于 -20

    06-17
    有用
    回复 1
    • 夜雪
      夜雪
      06-17
      我是判断移动向左移动大于20,向右移动大于20以及移动距离小于20三个范围的。其中前两个代码运行正常。但是第三个就无法执行了。
      06-17
      回复
  • 风清雾云开见日出
    风清雾云开见日出
    06-17

    代码问题最好是参考文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html,创建一个可复现的代码片段分享出来

    06-17
    有用
    回复
登录 后发表内容