scroll into view 锚点定位失效的三种情况

1. scroll-into-view绑定值未更新就取用(较少见)

主要说下scroll-into-view未更新
加了个 权限标签作根节点后(该标签为自定义组件 (目的为筛选条件,过滤没有登陆的用户等) 所以需要时间判定权限)所以该页面展示出来的时间较长。
该页面引用的子组件内部的scroll into view绑定的值{{scrollItem}}在页面未展示出来时就获取 此时scrollItem未更新。 所以自动定位失效
父组件(调用页面)

<auth>
	<view class="p-a">
		<m-a></m-a>
</auth>

子组件js

 /**
    * @function 获取自动定位锚点
    * @description 根据今天所处时间位置与今天是否符合要求定位
    **/
    getScrollItem: function () {
      if (today >= dateData.expireTime || today <= dateData.startTime) {
        this.setData({
          scrollItem: `item${today >= dateData.expireTime ? this.data.dateArray.length : 0}`
        })
      }
      else {
        this.setData({
          scrollItem: `item${this.findDayIndex(today) - 1}`
        })
      }
    }

 /**
  * @function 初始化显示日期模块
  * @description 根据日期作不同的初始显示与自动定位
  **/
  attached() {// 在组件实例进入页面节点树时执行
   this.initDate() //初始化生成21个数组对象
   this.getScrollItem() 
    console.log(`scrollItem ${this.data.scrollItem}`)//纠错时发现输出item10 按理页面加载时应该自动定位到第10个索引处 但没有

  }

attached()// 在组件实例进入页面节点树时执行
当页面展示出来前 attached函数的代码已执行 且scroll-into-view也绑定 而页面中的数据列表是空的 所以组件绑定的值为空。定位无效。
解决:
在页面展示出来后再加载组件
父组件页面js

onPageShow () {
    this.setData({
      showed: true
    })

父组件页面wxml

<m-a wx:if="{{showed}}"></m-a>

2. scroll-into-view绑定的值不是变量值(较常见)

要绑定变量值 不要绑定确定的值或字符串

<scrollview ...scroll-into-view="item10">
<scroll-view class="m-attendeceDate-scrollview" scroll-x  ...scroll-into-view="{{scrollItem}}">

3. 高度/宽度没有固定(较常见)

设置对应的确定宽/高即可
此处scroll-x为true 所以设确定的宽即可

.m-attendeceDate-scrollview {
  display: flex;
  width: 720rpx;<======设置对应的确定宽/高即可
  height: 100px;
  align-content: flex-start;
  justify-content: space-between;
}

你可能感兴趣的:(小程序,javascript)