踩坑小程序之cant read property offsetLeft of undefined

标签:程序 发布时间:2019年04月03日 点击1

↑开局一张图,故事全靠编↑

从一个需求说起

接触过小程序的同窗应该都接触过如许一个需求:点击列表页的某一项,进入详情页。同样,今天我也碰到如许一个需求,其实很简单的一个需求,无非就是一个tap事件加dataset传参实现路由带参数跳转到详情页。曩昔开发小程序的时候手机应用,也处理过如许的需求,原本应该是得心应手的。不过,可能是Copy别人代码Copy得太多太久太深,也从来没自立去想过别人为什么如许写、换种体例要怎样写、为什么换种体例就会报错等等诸如此类的题目浙江人事考试网,更别说去熟读开源源码,甚至本身造轮子。偶然候反思,本身入行这么多年了,天资仍旧平平,别说造轮子,就算是把别人轮子拿过来安上,都能整出一堆B.U.G。就比如开头的图片上,用的是鹅厂旗下某闻名公司的豪华套餐,居然被我用得翻车了!-- TypeError: Cannot read property 'offsetLeft' of undefined !!! 简直了,照旧只能怪本身技术太low了。

(图片来源于网络)

提问的伶俐

自从同伙给了我一个SS的IP和密码,如今我一有题目就是直接google开干。在我看来,与其把题目抛到各种广告满天飞的技术群或者丢给同伙圈里边的大佬,倒不如本身先脱手解决,哪怕是尝试了所有的答案,至少对题目会有更深的理解,以后面试中碰到面试官问您在项目中碰到过什么题目之类的,由于经过本身的一番搜索加实践,一样平常印象会深刻许多。反而别人直接告诉您答案的,可能您的成本更小,但是收获甚微。根据以往的经验,碰到题目,本身脱手成都人事考试,是更接近答案的唯一出路。或许您在开发中,碰到了某些题目,您通过一些途径解决了这个题目,然后,您又记录了下来废气塔,后续您碰到同样的题目,应该是可以迎刃而解的。假如您还把解决方案分享出来了,您简直是在造福人类。后来者,托您的福,更快的解决了同样的题目。

尝试方案1--重启开发者工具

can't read property 'offsetLeft' of undefined #1132

这是来自全球最大的同性交友网站GitHub上的一个issue,是由@yuwanlin 在一套遵循 React 语法规范的多端同一开发框架 Taro 中提出来的。根据当时的情境,是在微信开发者工具中删掉该小程序然后重新载入就解决了,大家给出的结论是微信小程序开发者工具的B.U.G。(注:该操作不会删除文件,请放心使用)--但是,我按照楼主的说法操作了一遍,效果然并卵,照旧原来的B.U.G,照旧一样的报错。

该方案失败

尝试方案2--外层加view

自定义组件在首次点击后会报错

@欧新志 这个小咯咯在2018-06-14向微信社区提出了类似的题目,他那个是自定义组件在点击之后出现了和我同款的B.U.G,而且也是存在嵌套子组件。评论中各位大神给出的答案是嵌套view。我也尝试了,试着加了一层view,但是题目仍旧存在。不过我感照旧和嵌套的子组件有关。于是,我各种尝试终于找到了一个方案。

第一次滚动和点击的时候都有这个报错,

下面是报错时的组件wxml

<view class="wraper" bindtap="onClick">

<slot></slot>

</view>

假如换成下面如许就不报错了

<view>

<view class="wraper" bindtap="onClick">

<slot></slot>

</view>

</view>

解决方案3--tap事件加在子组件里面

原代码:

<block wx:for="{{itemList}}" wx:key="key" wx:code="{{item}}">
      <view style="margin-top: 15px" bindtap="toDetail">
        <dgd-preview>
          <!--常规 preview-list 控件  -->
          <view class="dgd-preview-list"  data-item="{{item}}">
            <dgd-preview-item label="服务中间名称" style="color:#000;">
              {{item8721}}
            </dgd-preview-item>
            <dgd-preview-item label="预约营业" style="color:#000;">
              {{item.business}}
            </dgd-preview-item>
            <dgd-preview-item label="预约时间" style="color:#000;">
              {{item.time}}
            </dgd-preview-item>
            <dgd-preview-item label="预约状况" style="color:#000;">
              {{item.status}}
            </dgd-preview-item>
          </view>
        </dgd-preview>
      </view>
    </block>

修改之后:

<block wx:for="{{itemList}}" wx:key="key" wx:code="{{item}}">
      <view style="margin-top: 15px">
        <dgd-preview>
          <!--常规 preview-list 控件  -->
          <view class="dgd-preview-list" bindtap="toDetail" data-item="{{item}}">
            <dgd-preview-item label="服务中间名称" style="color:#000;">
              {{item8721}}
            </dgd-preview-item>
            <dgd-preview-item label="预约营业" style="color:#000;">
              {{item.business}}
            </dgd-preview-item>
            <dgd-preview-item label="预约时间" style="color:#000;">
              {{item.time}}
            </dgd-preview-item>
            <dgd-preview-item label="预约状况" style="color:#000;">
              {{item.status}}
            </dgd-preview-item>
          </view>
        </dgd-preview>
      </view>
    </block>

只是把方法挂载到了不同的位置,确实截然不同的结果。看来接下来应该再研究一下小程序的组件。

手机网站建设