Vue2.0 仿饿了么app问题解决

最新推荐文章于 2024-07-23 17:06:34 发布

原创最新推荐文章于 2024-07-23 17:06:34 发布 · 398 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

5 篇文章

订阅专栏

本文解决了Vue项目中shopcart组件的cartcontrol按钮无法点击的问题，通过修改computed属性为watch属性实现了better-scroll的创建。同时，针对transition动画失效的情况，调整了DOM结构，确保被控制元素完全包裹在transition标签内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Q1：shopcart中cartcontrol无法点击

错误提示：【Unexpected side effect of listshow...】

原视频是按照vue1.0来的，在computed属性中定义listshow时出现了以上错误提示，错误原因应该是在listshow方法中对fold进行了修改，而默认是只读的，所以按照加入set和get的方法修改后，不再出现错误，列表也能折叠。但是，cartcontrol依然不能点击，说明没有创建better-scroll，也就是set方法没有调用时机。

结合这篇博客https://blog.youkuaiyun.com/weixin_38049458/article/details/79804546，

解决方式：采用watch属性进行修改。为了简洁，我去掉了fold，只使用listshow，具体代码如下。

 <div class='shoplist'
      v-show='listshow'>
 </div>

  data(){
    listshow: false
  }

  watch: {
    listshow: function () {
      let show = this.listshow
      if (show) {
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.listcontent, {
              click: true
            })
          } else {
            this.scroll.refresh()
          }
        })
      }
      return show
    }
  }

处理了很久终于解决这个问题...所以对于各种解决方式还是要先思考原理再运用。

Q2：transition动画失效

正确方式是这样的

  <transition name='food'>
    <div ref='food'
         class='outter'
         v-show='foodshow'>
      <div class='food'>
      </div>
    </div>
  </transition>

但一开始将transition放在了outter和food之间，v-show控制的元素未被包含在transition中，所以当然过渡无效。并不是我一开始以为的transition需要包裹根元素或者CSS层级的问题。