Vue外卖项目的学习（9）

滑动购物车的一些bug

这里的scroll有一点小bug，如果不加判断，每点击一次都会增加一个new BScroll，导致出现bug
第二 如果不加this.scroll.refresh()，先单击一个食物，然后关闭，然后再添加多个，就会到值第一次滑动没有变化，第二次才好用，原因是滑动存在了，它不重新统计内容高度了，
这里的食物都是动态添加的，与之前的tops那个数组不同，那个是直接发送请求，固定死了列表，不会变的，这个是动态的，实例是一个单例，就要考虑重新统计内容高度这一个情况

listShow () {
        // 如果总数量为0, 直接不显示
        if(this.totalCount===0) {
          this.isShow = false
          return false
        }

        if(this.isShow) {
          this.$nextTick(() => {
            // 实现BScroll的实例是一个单例
            if(!this.scroll) {
              this.scroll = new BScroll('.list-content', {
                click: true
              })
            } else {
              this.scroll.refresh() // 让滚动条刷新一下: 重新统计内容的高度
            }

          })
        }

        return this.isShow
      }
    },

评价

<script>
  import BScroll from 'better-scroll'
  import {mapState, mapGetters} from 'vuex'
  import Star from '../../../components/Star/Star.vue'

  export default {

    data () {
      return {
        onlyShowText: true, // 是否只显示有文本的
        selectType: 2 , // 选择的评价类型: 0满意, 1不满意, 2全部
      }
    },
    mounted () {
      this.$store.dispatch('getShopRatings', () => {
        this.$nextTick(() => {
          new BScroll(this.$refs.ratings, {
            click: true
          })
        })
      })
    },

    computed: {
      ...mapState(['info', 'ratings']),
      ...mapGetters(['positiveSize']),

      filterRatings () {
        // 得到相关的数据
        const {ratings, onlyShowText, selectType} = this

        // 产生一个过滤新数组
        return ratings.filter(rating => {
          const {rateType, text} = rating
          /*
            条件1:
                selectType: 0/1/2
                rateType: 0/1
                selectType===2 || selectType===rateType
            条件2
                onlyShowText: true/false
                text: 有值/没值
                !onlyShowText || text.length>0
           */
          return (selectType===2 || selectType===rateType) && (!onlyShowText || text.length>0)
        })
      }
    },

    methods: {
      setSelectType (selectType) {
        this.selectType = selectType
      },
      toggleOnlyShowText () {
        this.onlyShowText = !this.onlyShowText
      }
    },

总结：这种评价类型的显然是要用到过滤，因为ratings存放在state中，所以相应的计算属性也应该在gatters中进行，思路是有三种评价类型， 还少一种selectType: 2 , // 选择的评价类型: 0满意, 1不满意, 2全部，而且之中还有一开始就显示的‘’只看有评价内容‘’这一块，都要考虑到，所以首先应该在计算属性中，通过选择不同的类型过滤出一个新数组，遍历这个新数组显示出来就能达到目标，在filterRatings方法中，先考虑过滤出3种评价类型，当点击全部时，selectType=2，在方法中如果selectType===2 ，就代表会一直返回true，相当于是没有过滤条件的，就会过滤出和原数组一样的数组，当点击不满意或者满意，selectType的值就会改变，（rateType代表0,1两个值，满意或不满意，从后台获取的），与rateType进行比较，过滤出true的值，形成一个新数组，后面的显示有评论内容也是如此，必须要同时满足这两个条件才可以，所以用&&。这种过滤的形式值得参考