发表于 更新于 分类于

简单方法

vue-cli4 vue2.6

在 public 目录下创建 data 文件夹，在 data 文件夹中创建 index.json 文件，访问 http://localhost:8080/data/index.json 即可查看到 json 数据。

使用 axios 进行请求的关键代码如下：

1
2
3
4
5
6
7
8
9
10
axios.get('/data/index.json')
  .then((res) => {
    res = res.data
    this.city = res.city
    if (res.ret) {
      const data = res.data
      this.swiperList = data.swiperList
      this.iconList = data.iconList
    }
  })

图片展示：

效果

借助 vue.config.js 配置

借助下面的配置，访问 http://localhost:8080/api/seller 即可查看到 json 数据。

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const appData = require('./data.json')
const seller = appData.seller

module.exports = {
  devServer: {
    before(app) {
      app.get('/api/seller', function (req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      })
    }
  }
}

使用 axios 进行请求的关键代码如下：

1
2
3
4
axios.get('/api/seller')
  .then((res) => {
  	console.log(res)  
  })

页面渲染问题

因为在一开始，轮播图的数组为空，当请求到的时候数组才有数据，这时候就有一个 bug：图片不能循环轮播。解决的方法是加上 v-if

1
2
3
4
5
6
7
8
<swiper :options="swiperOption" v-if="swiperList.length">
  <!-- slides -->
  <swiper-slide v-for="item in swiperList" :key="item.id">
    <img class="img-swiper" :src="item.imgUrl">
  </swiper-slide>
  <!-- Optional controls -->
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

参考

https://www.imooc.com/article/291839

https://webpack.js.org/configuration/dev-server/#devserverbefore

发表于 分类于

基础

在 github 上创建 swiper 分支

在本地进行 git pull 拉取线上的分支

1
2
3
4
vue-travel>git pull
From github.com:xunzhanggzl/vue-travel
 * [new branch]      swiper     -> origin/swiper
Already up to date.

在本地进行 git checkout swiper 切换到 swiper 分支

1
2
3
vue-travel>git checkout swiper
Switched to branch 'swiper'
Your branch is up to date with 'origin/swiper'.

在 swiper 分支上进行开发，在本地开发完后，提交到线上

1
2
3
4
5
6
git add .
git commit -m "finish swiper"
git push

To github.com:xunzhanggzl/vue-travel.git
   a60bf20..dd193b5  swiper -> swiper

合并到 master 上

1
2
3
git checkout master
git merge origin/swiper # 进行合并
git push # 推送到线上分支

发表于 更新于 分类于

实现

效果

英雄联盟 s9 的时候，看英雄联盟官网的文章发现有这个效果：就是随着滚动条的下拉，最上部会有一个相应的进度条，就研究了一下，做一个记录。

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
  <div id="app">
    <div class="process" ref="process"></div>
  </div>
</template>

<script>
  export default {
    name: "app",
    mounted() {
      window.addEventListener("scroll", this.calculatePer)
    },
    methods: {
      calculatePer() {
        const h = document.documentElement
        const b = document.body
        const st = "scrollTop"
        const sh = "scrollHeight"
        const color = "#ffdd67"
        let percentage = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100
        // console.log(this.$refs.process)
        this.$refs.process.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent 0)`
      }
    }
  }
</script>

<style lang="scss">
  .process {
    position: fixed;
    top: 0;
    width: 100%;
    height: 4px;
    // background: linear-gradient(to right, $yellow 24%, transparent 0);
    z-index: 3;
  }
</style>

上面是关键的代码部分，其中主要的就是 JavaScript 那部分的代码。下面的这张图有助于理解。

结构图

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

https://juejin.im/user/5bea27965188250edf4ad8b7/pins