vue 中better-scroll滚动插件和show的使用

2018-08-21  本文已影响0人  阳光之城alt
image.png
1 npm i better-scroll
2 import BScroll from 'better-scroll'
2.1<div class="ratings" ref="ratings"></div>
3 .ratings{
    position: absolute;
    top: 174px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
      }
4getgoods(res){
            res=res.data;
            if(res.ratings&&res){
                this.ratings=res.ratings;
                this.$nextTick(()=>{ //ratings 组件调用BScroll滚动条
               if(!this.scoll){
                  this.scroll=new BScroll(this.$refs.ratings,{
                    click:true
                  });
                }else{
                    this.scroll.refresh() 
                }
             })
           }
         },

show灵活使用

<span :class="{'icon-thumb_up':rating.rateType===0, 'icon-thumb_down':rating.rateType===1}" ></span>{{rating.text}}

     <li v-for="rating in ratings"  
      v-show="needShow(rating.rateType, rating.text)" class="rating-item border-bottom"> </li>
  methods:{
needShow(type, text) {
        if (this.onlyContent && !text) {
          return false;
        }
        if (this.selectType === ALL) {
          return true;
        } else {
          return type === this.selectType;
        }
      }

}

set 添加属性

    addcart(event){ //左侧加减按钮 商品数量多少
        if(!event._constructed){
            console.log("tu")
            return false;
        }
        if(!this.food.count){
            Vue.set(this.food,'count',1)
        }else{
            this.food.count=this.food.count+1;
            console.log("n 在哪里")
        }
        console.log(!event._constructed)
        //this.$emit("cart",event.target)//派发一个组件方法
//      console.log(event.target)
    },

   //消除1PX
       &:last-child::before{border: none;}


参考地址: https://github.com/ustbhuangyi/better-scroll
https://www.npmjs.com/package/better-scroll

上一篇 下一篇

猜你喜欢

热点阅读