<div> <div v-show="headerFixed"> <div><span>知识模块</span></div> <div><span>知识点</span></div> <div><span>能力要求</span></div> </div> </div>
这个元素默认是隐藏的，只有当页面滚动的距离达到了它的位置的时候我们才让它显示，由于它是固定状态，所以它的隐藏显示并不会对页面产生影响，这样下面的内容就不会往上顶了，就可以解决ios手机上拉页面橡皮筋效果的Bug了，当然这种方式有些取巧，但是暂时没有更好的解决方案了，如果大家有更好的解决方案，欢迎在下面评论。最后给大家看一下我的页面布局：
<div v-show="kpointListShow"> <div> <div> <div><span>知识模块</span></div> <div><span>知识点</span></div> <div><span>能力要求</span></div> </div> </div> <div> <div v-show="headerFixed"> <div><span>知识模块</span></div> <div><span>知识点</span></div> <div><span>能力要求</span></div> </div> </div> <div v-for="(kpointItem,index) in rows.kpointList" :key="index"> <div><span>{{kpointItem.knowModule}}</span></div> <div><span>{{kpointItem.knowPoint}}</span></div> <div><span>{{kpointItem.abilityRequire}}</span></div> </div> </div>