vue-scroller的使用 && 開發自己的 scroll 插件

vue-scroller的使用 

 　在spa開發過程中，難免會遇到使用scroll的情況，比如下面的：

     

 　即，當用戶選擇好商品之后，點擊購物車，就會有一個購物車彈窗，如果選擇的商品小於三個，剛好合適，如果多余三個，我們就需要使其滾動了。  

　　

　而 vue-scroller  就可以很好的實現滾動上面的問題。   這個文件可以很容易進行測試。

　使用過程可以參考github。 這是他的demo、

　這里只提幾點需要注意的:

• "main": "dist/vue-scroller.min.js", 這是package.json中的入口文件。 
• 使用時一般都是直接引入，然后 Vue.use(); 即可。

　　

 <scroller style="width: 2.4rem!important">
            <!-- 循環顯示分類 -->
            <div class="kind" v-for="item,index in items">
              <a v-bind:href="'#anchor'+index" v-bind:class="{active: index==0}"  v-on:click="getContent(item.id, $event)">{{item.name}}</a>

              <!-- 控制分類中是否顯示數目，主要使用了reduce來計算總數 -->
              <span class="number" v-if="(typeof numbers[index] == 'undefined') ? false : (numbers[index].reduce(function (prev, current) {return ((typeof prev == 'undefined') ? 0 : prev) + ((typeof current == 'undefined') ? 0 : current);}) > 0)" >
                {{(typeof numbers[index] == "undefined") ? "" : numbers[index].reduce(function (prev, current) {return ((typeof prev == "undefined") ? 0 : prev) + ((typeof current == "undefined") ? 0 : current);})}}
              </span>
            </div>
        </scroller>

　即只需要將 需要滑動部分包裹在 scroller 中就可以了，其中scroller的高度默認是100%， 所以如果希望調節高度，最好的辦法是調節scroler外層div的高度。 

 

 

開發自己的 scroll 插件

　　使用別人寫好的插件總是不太好的，因為針對於當前項目而言，我只是希望實現一個scoll的功能，而對上拉、下拉等功能是沒有需要的，所以使用這么大的插件是沒有必要的。 我們可以根據自己的需求來開發適合自己項目使用的插件。

　　

　　

 

 

 

 

 

推薦： https://github.com/hilongjw/vue-lazyload  圖片懶加載插件。