视图层-Search-pdd项目实现搜索页面商品列表上下滚动

上下滚动

项目源码地址

https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd

使用第三方插件库better-scroll

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。

下载better-scroll

npm i better-scroll --save

在需要使用的组件中引入模块

这里是在搜索页面引入，所以在Search.vue中引入模块

import BScroll from 'better-scroll'

初始化

通过watch监听实现一旦页面数据刷新，就重新渲染页面，实现滚动效果，确保页面渲染前会有数据

better-scroll的初始化一定要在数据渲染完成后进行，所以通过监听方法监听数据变化

在Shop.vue写入监听方法

 <template>
   <div class="shop">
     <!--左边-->
     <div class="menu-wrapper">
       <ul>
         <!--current-->
         <li class="menu-item" v-for="(goods, index) in searchgoods" :key="index" >
           <span>{{goods.name}}</span>
         </li>
       </ul>
     </div>
     <!--右边-->
     <div class="shop-wrapper">
       <ul>
         <li class="shops-li" v-for="(goods, index1) in searchgoods" :key="index1" >
           <div class="shops-title">
             <h4>{{goods.name}}</h4>
             <a href="">查看更多 ></a>
           </div>
           <ul class="phone-type" v-if="goods.tag === 'phone'">
             <li v-for="(phone,index3) in goods.category" :key="index3" >
               <img :src="phone.icon" alt="">
             </li>
           </ul>
           <ul class="shops-items">
             <li v-for="(item, index2) in goods.items" :key="index2">
               <img :src="item.icon" alt="">
               <span>{{item.title}}</span>
             </li>
           </ul>
         </li>
      </ul>
  </div>
</div>
</template>

<script>
//1：引入vuex中从服务器端发送过来的数据，也就是state.js中的数据
import { mapState} from 'vuex';
//引入第三方插件库实现滚动效果
import BScroll from 'better-scroll'

export default {
name: "Shop",
  mounted() {
    //:2：请求搜索列表数据
     this.$store.dispatch('reqSearchGoods'
       // //通过actions.js中的执行回调来在数据刷新后渲染页面
      // ,()=>{
      //   this._initBScroll();
       // }
     );
  },
  computed: {
     //3：获取搜索列表数据
    ...mapState(['searchgoods'])
  },
  watch: {
     searchgoods() {
       this.$nextTick(()=>{
         //监听初始化方法
         this._initBScroll();
       })
     }
  },
  methods: {
     _initBScroll() {
       //1：左边
       let leftScroll = new BScroll('.menu-wrapper', {
         scrollY: true,  //当设置为 true 的时候，可以开启纵向滚动。
         click: true
       });
       //1：左边
       let rightScroll = new BScroll('.shop-wrapper', {
         scrollY: true,  //当设置为 true 的时候，可以开启纵向滚动。
         click: true
       })
     }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
//css样式见源码
</style>