Created 2019-4-2 22:17:34 by huqiUpdated 2019-4-2 23:17:34 by huqi
↑开局一张图，故事全靠编↑
从一个需求说起
接触过小程序的同学应该都接触过这样一个需求：点击列表页的某一项，进入详情页。同样，今天我也遇到这样一个需求，其实很简单的一个需求，无非就是一个 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;”>
{{item.name}}
</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;”>
{{item.name}}
</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>
只是把方法挂载到了不同的位置，确实截然不同的效果。看来接下来应该再研究一下小程序的组件。