商家列表页 - mingliao/nuxt_elm GitHub Wiki

摘要

  1. 使用es7比较新的异步解决方案await
  2. 轮播图
  3. 底部导航高亮

效果渲染图

ES7的Async/Await

mdn await 这是比较新的异步替换then的处理方式

主要代码如下：

 async beforeMount () {
      if (!this.$route.query.geohash) {
        const address = await cityGuess() //等待数据返回，再继续执行
        this.geohash = address.latitude + ',' + address.longitude
      } else {
        this.geohash = this.$route.query.geohash
      }
    }
    ...
    let res = await msiteAdress(this.geohash); //等待上面的异步数据返回之后再继续执行，这个异步请求。

在上面的代码中用了两个await，避免了then等callback 层层嵌套的问题。

轮播图

轮播图使用vue-awesome-swiper 这个是对swiper做的vue插件封装。 在项目中使用有两种方式

  • 线上项目静态文件导入
  • nuxt静态文件导入
  • 使用插件方式导入
  1. 线上项目静态文件导入
import 'src/plugins/swiper.min.js'
import 'src/style/swiper.min.css'
......
 mounted(){
        //获取导航食品类型列表
       	msiteFoodTypes(this.geohash).then(res => {
       		let resLength = res.length;
       		let resArr = [...res]; // 返回一个新的数组
       		let foodArr = [];
    		for (let i = 0, j = 0; i < resLength; i += 8, j++) {
    			foodArr[j] = resArr.splice(0, 8);
    		}
    		this.foodTypes = foodArr;
        }).then(() => {
        	//初始化swiper
        	new Swiper('.swiper-container', {
		        pagination: '.swiper-pagination',
		        loop: true
		    });
        })
    },
  1. nuxt静态文件导入 利用head配置项:
head: {
      script: [
        { src: '/swiper/swiper.min.js' }
      ],
      link: [
        { rel: 'stylesheet', href: '/swiper/swiper.min.css' }
      ]
    },
 mounted () {
      // 获取导航食品类型列表
      msiteFoodTypes(this.geohash).then(res => {
        let resLength = res.length
        let resArr = [...res] // 返回一个新的数组
        let foodArr = []
        for (let i = 0, j = 0; i < resLength; i += 8, j++) {
          foodArr[j] = resArr.splice(0, 8)
        }
        this.foodTypes = foodArr
      }).then(() => {
        // 初始化swiper
        window.Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          loop: true
        })
      })
    }
  1. 使用插件方式导入 参考nuxt-ssr-example

这里使用的就是这第三种方式。

轮播图无数据默认显示

无轮播图的时候，项目给的是一个默认的空白占位svg 代码如<img src="~/assets/images/fl.svg" class="fl_back animation_opactiy" v-else>

这个就是默认的轮播图占位图了。 样式如图

@keyframes backOpacity{
   0%   { opacity: 1 }
   25%  { opacity: .5 }
   50%  { opacity: 1 }
   75%  { opacity: .5 }
   100% { opacity: 1 }
}

.animation_opactiy{
    animation: backOpacity 2s ease-in-out infinite;
}

shopList

shopList在项目里面作为一个独立的组件存在，好比一个封装好的函数。详细看这里

底部导航高亮

footGuide 是底部的组件，其高亮主要是由当前路由判断，切换的

<svg class="icon_style">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('msite') !== -1? '#msiteActive' : '#msite'"></use>
        </svg>
⚠️ **GitHub.com Fallback** ⚠️