微信小程序获取某个元素宽度计算定位元素的left值

最新推荐文章于 2024-03-25 13:34:38 发布

Archer_yy

最新推荐文章于 2024-03-25 13:34:38 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/Dilemma_me/article/details/102912487

版权

js：

 data: {
    step:0,
    winWidth:0,
    winHeight:0,
    currentLeft:0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var query = wx.createSelectorQuery();
    that.setnavtitle()
    wx.getSystemInfo({
      success(res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight,
        })
      }
    })
    query.select('.changephone_step').boundingClientRect(function (rect) {
      console.log(rect.width)
      that.setData({
        currentLeft: (that.data.winWidth-rect.width)/2
      })
    }).exec();
  },

wxml：

 <view class="changephone_box">
    <view class="changephone_step" style="left:{{currentLeft}}px">
    
    </view>
  </view>

wxss:

.changephone_box {
  width: 100%;
  background: #fff;
  position: relative;
}

.changephone_step {
  width: 90%;
  height: 300rpx;
  background: #fff;
  box-shadow: 0px 3px 18px 0px rgba(20, 37, 57, 0.2);
  border-radius: 10px;
  position: absolute;
  top: -150rpx;
}