1. vue.js 組件添加事件

<Buttom @click.native='handleClick'>

.native 是用來(lái)區(qū)分組件的事件和組件內(nèi)部的事件，當(dāng)然也可以是用的$emit('myClick') 從組件內(nèi)部派發(fā)事件來(lái)實(shí)現(xiàn)

2. vue 微信支付遇到的坑

使用的vue-router 的hash模式， 所以頁(yè)面的路徑是www.ssss.com/shop/#/home 的樣子，但是微信支付目錄驗(yàn)證不支持這種hash模式，所以在微信看來(lái)目錄是錯(cuò)誤。

// Recharge.vue
created() {
    let config = {};
    config.url = window.location.href;
    // 判斷當(dāng)前url是否存在?參數(shù)匹配符
    if(!config.url.match(/\?/)) {
        location.replace(window.location.href.split('#')[0] + '?' + window.location.hash);
        return ;
    }
}

3. 微信中拉起微信支付控件

  1. 使用wx的[jssdk](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)；是比較新的方式,需要引入威信度的jssdk
  2.  使用老的WeixinJSBridgeReady方式拉起支付控件，

這次使用的是后面這種方法： 步需要引入七牛的jssdk直接就可以拉起

```
handleWxpay() {
  if(this.isweixin) {
    //options 是接口返回的wx的一些配置信息
    this.wxReadyToPay(options)
  }else {
     console.log('open in wx')
  }
},
onBridgeReady(options){
  let that = this
  console.log(options)
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest',
    options,
    function(res){
      console.log(res);
      //使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：res.err_msg將在用戶支付成功后返回    ok，但并不保證它絕對(duì)可靠。
      switch(res.err_msg){
        case "get_brand_wcpay_request:ok": //支付成功
          console.log('支付成功')
          // that.$router.push({path:'/SettlemenSuccess'})
          break;
        case "get_brand_wcpay_request:cancel": //支付取消
          console.log('取消支付')
          break;
        case "get_brand_wcpay_request:fail": //支付失敗
          console.log('支付失敗')
          break;
        default:
          // console.log(res.err_msg);
        break;
      }
    }
  )
},
wxReadyToPay(options){
  let that = this
  if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
      document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(options), false);
    }else if (document.attachEvent){
      document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(options));
      document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(options));
    }
  }else{
    that.onBridgeReady(options);
  }
},
isweixin() {
  const ua = window.navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      return true;
  } else {
      return false;
  }
},
```

4. 微信中預(yù)覽圖片(類似微信支付)

1.微信的jssdk
2.WeixinJSBridgeReady
```
handleToSwiper(index) {
  this.current = index
  this.wxReady(index)
},
wxSwiper(index){
  let newImgs = this.newImgs.map((item) => {
    return this.host + item.filename + this.previewParameter //添加的七牛圖片的參數(shù)，根據(jù)自己項(xiàng)目的需求添加
  })
  WeixinJSBridge.invoke('imagePreview', {
    current: newImgs[index],
    urls:newImgs  
    }
  )
},
wxReady(index){
  let that = this
  if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
      document.addEventListener('WeixinJSBridgeReady', that.wxSwiper(index), false);
    }else if (document.attachEvent){
      document.attachEvent('WeixinJSBridgeReady', that.wxSwiper(index));
      document.attachEvent('onWeixinJSBridgeReady', that.wxSwiper(index));
    }
  }else{
    that.wxSwiper(index);
  }
},
```
[七牛圖片處理](https://developer.qiniu.com/dora/manual/1270/the-advanced-treatment-of-images-imagemogr2#imagemogr2-thumbnail-spec) 例如：`?imageView2/1/w/200/h/200/interlace/1/q/100'`參數(shù)，讓圖片，無(wú)論是橫圖還是豎圖在n * n大小的范圍你不變形的顯示出來(lái)

5. vue開(kāi)發(fā)環(huán)境 跨域問(wèn)題 使用代理的方式解決

在開(kāi)發(fā)的過(guò)程中后端給的接口，存在跨域的問(wèn)題，導(dǎo)致在本地調(diào)試無(wú)法正常的進(jìn)行，通常解決這樣的問(wèn)題有兩種方式：
1. 后端允許跨域，（為了安全可以加一些限制，有很多種的方法，可以和后端的小伙伴進(jìn)行協(xié)商解決）
2. 利用node.js 在vue-cli中使用 代理的方式，服務(wù)器去請(qǐng)求服務(wù)器不會(huì)存在跨域的問(wèn)題。

proxyTable的配置：實(shí)際是webpack中devServer的proxy的配置

       //在vue-cli config下dev環(huán)境配置中
       const getIP = utils.getIP // 獲取ip的方法
       const host = getIP() ? getIP() : 'localhost'
       const port = 9092
       const proxyTableUrl = `http://${host}:${port}/yiqi`
       const baseUrl = 'http://xxxxxxxxx.cn/'
       proxyTable: {
         [proxyTableUrl]: {
             target: baseUrl,
             changeOrigin: true, //允許跨域
             pathRewrite: {
                 '^/yiqi': ''
             }
          }
       }

訪問(wèn) http://192.168.13.233:8081/yiqi/apixxxxx
代理了http://xxxxxxxxx.cn/apixxxxx

6. 獲取的本地內(nèi)網(wǎng)的ip 目的是為了達(dá)到在手機(jī)預(yù)覽的目的

//環(huán)境是mac機(jī)子  window系統(tǒng)存在問(wèn)題
const glob = require('glob');

module.exports = {
  getIP:function () {
    var os = require('os')
    var IPv4 = '127.0.0.1'
    var interfaces = os.networkInterfaces()
    for (var key in interfaces) {
      interfaces[key].some(function (details) {
        if (details.family == 'IPv4' && key == 'en0') {
          IPv4 = details.address
          return true
        }
      })
    }
    return IPv4
  }
}

7. 使用webpack 配置外部引入，避免vender.js打包過(guò)大的問(wèn)題

在使用vue-cli進(jìn)行打包的時(shí)候，會(huì)把一些第三方的插件打包在vender.js中，隨著項(xiàng)目的迭代，會(huì)因?yàn)椴寮褂玫脑絹?lái)越多導(dǎo)致vender.js過(guò)大。這種情況下可以把一些插件使用cdn，或著使用自己的地址來(lái)作為外部的引用來(lái)使用

//wwbpack.base.config.js
externals: {//CDN 引入文件 減少vendor.js體積
    // vue: 'Vue',
    swiper:"Swiper"
},

在index.html模板中引入你想使用的插件的cdn

image.png

在項(xiàng)目中就可以正常的使用Swiper插件了

  // sipwer.vue
  import '@/plugins/css/swiper-3.4.2.min.css';
  import Swiper from 'swiper'

在項(xiàng)目打包之后就在控制臺(tái)查看就會(huì)看見(jiàn)已經(jīng)引入了你想要的js

image.png

image.png

當(dāng)然你也可以吧vue從外部引入使用 。本人的項(xiàng)目選擇打包在vender.js中。

8. 日歷組件

非常感謝zwhGithub自己寫(xiě)的calendar組件

9. axios的post 方式的使用方法

axios(url, {
   method: 'post',
   headers: {
     "content-type": "application/x-www-form-urlencoded",
     'Accept': 'application/json'
   },
   data: qs.stringify(data),
   withCredentials: true
 })

10. 圖片 ，字體 , 媒體 是否打包在js中的配置（webpack）

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
    // 超過(guò)10字節(jié) 會(huì)打包到img目錄下,否則打包在js中； 想要打包在    img limit:1 
        limit: 1, 
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
},
{
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
},
    {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

11. webpack路徑的配置 結(jié)合vue-cli

//vue-cli 中配置
build:{
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: '',
  assetsPublicPath: '/shop/',
}
 

// webpack
output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
  publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
},
plugins:[
  // copy custom static assets
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }
  ])
]

assetsRoot決定了webpack中輸出的路徑;在目錄下的 dist目錄

image.png

image.png

image.png

assetsPublicPath決定了放在服務(wù)器時(shí)的項(xiàng)目路徑
如果assetsPublicPath:'/shop/'

image.png

如果assetsPublicPath:''
則上面的路徑中的shop不存在，根據(jù)自己姓名不同的需求來(lái)配置該路徑

12. 微信中改變title的坑

由于在個(gè)頁(yè)面中會(huì)動(dòng)態(tài)的改變的title的名字

//dom.js
export function setDocumentTitle(title = 'index') {
  if (document.title === title) {
    return
  }
  document.title = title
}

但是在微信中 ios的手機(jī)不能夠改變title,采用下面的方案來(lái)hack

export function setDocumentTitle(title = 'index') {
  if (window.document.title === title) {
    return
  }
  document.title = title
  var mobile = navigator.userAgent.toLowerCase()
  if (/iphone|ipad|ipod/.test(mobile)) {
    var iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    // 替換成站標(biāo)favicon路徑或者任意存在的較小的圖片即可
    iframe.setAttribute('src', '/favicon.ico')
    var iframeCallback = function () {
      setTimeout(function () {
        iframe.removeEventListener('load', iframeCallback)
        document.body.removeChild(iframe)
      }, 0)
    }
    iframe.addEventListener('load', iframeCallback)
    document.body.appendChild(iframe)
  }
}

參考了deboyblog的vue-wechat-title封裝的方法

13. 判斷是否為{} null 用在后端接口可能會(huì)存在返回的某一個(gè)字段存在null, 或者是{ }的情況，在是使用vue時(shí)會(huì)對(duì)這樣的返回做出判斷，比如不顯示的情況。但是{} == {} //false

/*
* 判斷是否為{} null
*/
//es5的方法
export function isEmptyObject(obj) {
  for (var key in obj){
    return !obj.hasOwnProperty(key)
  }
  return true
};
//es6的方法
export function isEmptyObjectES6(obj) {
  if(Object.getOwnPropertyNames(obj).length){
    return false
  }
  return true
}

14. vconsole在vue中的使用

const debug = process.env.NODE_ENV !== 'production'
if (debug) { //vconsole 移動(dòng)端調(diào)試
    const Vconsole = () => import('vconsole')
    let  vConsole = new Vconsole()
    vConsole.then(res => {
        vConsole = new res()
     }, err => {
        console.log(err)
    })
}

15. input 圖片上傳功能

<div class="upload-file" style="">
    <div id='bg' 
          :style="'background-image:url('+ img +')'">

    </div>
    <!-- <img v-if='img' :src="img" alt="" > -->
    <input type="file" accept="image/*" @change='upload'>
</div>

upload(e) {
  let that  = this
  let file = e.target.files[0]
  if(file) {
    if (!/image\/\w+/.test(file.type)) {
      alert("請(qǐng)確保文件為圖像類型")
      return false;
    }
    // 圖片預(yù)覽 存在裁剪問(wèn)題
    //const formData = new FormData()
    //formData.append('file', file)
    //axios(url,[,config]).then().catch()
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function() {
      //console.log(this.result)
      that.img = this.result
      let base64 = this.result
      let data = {
        order_id,
        base64
      }
      axios(`${baseUrl}/order/xxxxxx/`, {
        method: 'post',
        headers: {
          "content-type": "application/x-www-form-urlencoded",
          'Accept': 'application/json'
        },
        data:qs.stringify(data),
        withCredentials: true
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      }) 
    } 
  }
},

16. 分包加載

// 沒(méi)有進(jìn)行分包的加載 會(huì)在首次進(jìn)入首頁(yè)的時(shí)候加載所有的組件
import ProfilePicture from '@/components/ProfilePicture'

// 就版本的分包加載的方法
const ProfilePicture = r => require.ensure([], () => r(require('../components/ProfilePicture')), 'ProfilePicture')

// 新版webpack 3.6的分包加載
const ProfilePicture = () => import('../components/ProfilePicture')

17. tabbar的封裝 當(dāng)然方法也很多,懶得寫(xiě)了直接貼代碼吧

<template>
  <div id="table-bar" class="border-top-1px">
    <div class="items" @click='switchTab("Home")'
      :class="$route.path.indexOf('Home') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Home') !== -1" 
          src="../images/icon_shouye.png" alt='active'/>
        <img v-else src="../images/icon_shouye2.png" alt="normal">
      </div>
      <div class="text">
        首頁(yè)
      </div>
    </div>
    <div class="items" @click='switchTab("Order")'
      :class="$route.path.indexOf('Order') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Order') !== -1" 
          src="../images/icon_dingdan.png" alt='active'>
        <img v-else src="../images/icon_dingdan2.png" alt="normal">
      </div>
      <div class="text">
        訂單
      </div>
    </div>
    <div class="items" @click='switchTab("Mine")'
      :class="$route.path.indexOf('Mine') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Mine') !== -1" 
          src="../images/icon_me2.png" alt="active">
        <img v-else src="../images/icon_me.png" alt="normal">
      </div>
      <div class="text">
        我的
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TableBar",
  data(){
    return {

    }
  },
  methods: {
    switchTab(path) {
      this.$router.replace(path)
    }
  },
  mounted() {
    
  },
}
</script>
<style lang='less' scoped>
  @import '../styles/mixin.less';
  @import '../styles/base.less';
  #table-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 0.5rem;
  }
  .items{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: @subtitle-color;
    font-size: 0.11rem;
  }
  .text{
    font-size: 0.11rem;

  }
  .icon{
    width: 0.22rem;
    height: 0.22rem;
    overflow: hidden;
    margin-bottom: 0.03rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .active{
    color: @title-color;
  }
</style>

17. swiper插件 自定義分頁(yè)器 直接上代碼吧

<template>
  <div class="swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" 
          v-for='(item, index) in banners'
          :key='index'>
          <img :src="item" alt="" style='width:100%;height:100%'>
        </div>
      </div>
      <!-- 如果需要分頁(yè)器 -->
      <!-- <div class="swiper-pagination"></div> -->
    </div>
    <!--自定義的分頁(yè)器 非官方-->
    <div v-cloak class="pagination swiper-pagination-custom">
      <span class="swiper-pagination-customs"
      :class="{'swiper-pagination-customs-active':index+1 == swiperActIndex}"
      v-for="(item, index) in banners"
      :key='index'></span>
    </div>
  </div>
</template>
<script>
  import '@/plugins/css/swiper-3.4.2.min.css';
  import Swiper from 'swiper';
  export default {
    name: "",
    data: () => ({
      swiperActIndex:1
    }),
    props:['banners'],
    methods:{
      _initScroll() {
        let that = this
        if(this.mySwiper) {
          this.mySwiper.destroy(true, true)
        }else {
          this.mySwiper = new Swiper('.swiper-container', {
            autoplay: 3000,// 可選選項(xiàng)，自動(dòng)滑動(dòng)
            speed:1000,
            loop:true,
            autoplayDisableOnInteraction:false, // hack 滑動(dòng)后自動(dòng)輪播停止
            pagination: '.swiper-pagination',
            paginationType : 'custom',
            paginationCustomRender(mySwiper, current, total) {
              var customPaginationHtml = "";
              for(var i = 0; i < total; i++) {
                if(i == (current - 1)) {
                customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                } else {
                customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
                }
              }
              return customPaginationHtml;
            },
            onSlideChangeStart: function(swiper){
              // loop屬性會(huì)影響len的值
              let len = swiper.slides.length - 2
              if(swiper.activeIndex === len+1) {
                that.swiperActIndex = 1
              }else if(swiper.activeIndex === 0) {
                that.swiperActIndex = len
              }else {
                that.swiperActIndex = swiper.activeIndex
              }

            }
          })
        }
      }
    },
    mounted() {
      setTimeout(function(){
        this._initScroll()
      }.bind(this),300)
    }

  }
</script>
<style lang="less" scoped>
  @import '../styles/base.less';

  .swiper-container{
    width: 3.3rem;
    height: 3.3rem;
  }
  .swiper-slide{
    width: 100%;
    height: 100%;
  }
  .pagination{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 0.2rem;
  }
  /*包裹自定義分頁(yè)器的div的位置等CSS樣式*/
  .swiper-pagination-custom {
    bottom: -0.2rem;
    left: 0;
    width: 100%;
  }
  /*自定義分頁(yè)器的樣式，這個(gè)你自己想要什么樣子自己寫(xiě)*/
  .swiper-pagination-customs {
    width: 0.08rem;
    height: .01rem;
    display: inline-block;
    background: #000;
    opacity: .3;
    margin: 0 .07rem;
    background-color: @subtitle-color
  }
  /*自定義分頁(yè)器激活時(shí)的樣式表現(xiàn)*/
  .swiper-pagination-customs-active {
    opacity: 1;
    background-color: @title-color;
  }

</style>

18. iphoneX的底部適配

在項(xiàng)目中因?yàn)榈撞縯ab欄在iphonex的顯示問(wèn)題

1. 方法一

@media only screen and (width: 375px) and (min-height: 690px){
  #app {
     padding-bottom: 0.34rem;
   }
 }

2. 方法二

第一步：新增 viweport-fit 屬性，使得頁(yè)面內(nèi)容完全覆蓋整個(gè)窗口：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

第二步：頁(yè)面主體內(nèi)容限定在安全區(qū)域內(nèi)

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的適配

• 類型一：fixed 完全吸底元素（bottom = 0）

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

• 類型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回頂部”、“側(cè)邊廣告” 等

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

19. webpack打包后可以看見(jiàn)源碼

    
    
    image.png
    
    

    原理是你使用了 webpack 的 source-map 功能，與 vue 無(wú)關(guān)。
    source-map 是“打包壓縮后的代碼”和“源代碼”的對(duì)應(yīng)關(guān)系，高級(jí)瀏覽器會(huì)自動(dòng)加載這個(gè)文件以便調(diào)試。

解決辦法:

將 config/index.js 中 build 下的 productionSourceMap: true,
改為 productionSourceMap: false, 即可.

20. 使用flex布局 在ios上頁(yè)面無(wú)法滾動(dòng)的hack方案（在安卓上沒(méi)遇見(jiàn)這種問(wèn)題）

描述：在使用flex布局，在滾動(dòng)的box有滾動(dòng)時(shí)，當(dāng)?shù)谝淮芜M(jìn)入頁(yè)面時(shí)，頁(yè)面出現(xiàn)無(wú)法滾動(dòng)的問(wèn)題。但是進(jìn)入其他頁(yè)面，再次返回該頁(yè)面就可以滾動(dòng)了（在兩次項(xiàng)目中都遇見(jiàn)了這樣的問(wèn)題）

坑：原本以為是由于圖片渲染的時(shí)候高度沒(méi)有確定，導(dǎo)致的高度問(wèn)題引發(fā)的內(nèi)容沒(méi)有填充box的問(wèn)題。但是使用了在img標(biāo)簽外面寫(xiě)固定高度的div來(lái)解決，并沒(méi)有效果。

最終使用了定位的方式來(lái)解決這樣的問(wèn)題。

eg: 會(huì)出現(xiàn)這種情況的代碼

// html
<div class='box'>
  <div calss='content'>
     <div class='item'>
        content1
     </div>
     <div class='item'>
        content2
     </div>
  </div>
  <div class='bottom-btn'>我是一個(gè)按鈕</div>
</div>

// css

.box{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.content{
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.item{
    width:100%;
    height:500px;
}
.bottom-btn{
    height:4rem;
}

這種布局的在第一次進(jìn)入的時(shí)候會(huì)有幾率出現(xiàn)無(wú)法滾動(dòng)的情況

hack: 可能是ios中對(duì)定位的比較的敏感，或者是定位可以脫離文檔流的原因（還不清楚），可以使用定位的方法來(lái)hack這種問(wèn)題

// html
<div class='box'>
  <div calss='content'>
    <div class='scroll-box'>
        <div class='item'>
        content1
        </div>
        <div class='item'>
        content2
        </div>
    </div>
     
  </div>
  <div class='bottom-btn'>我是一個(gè)按鈕</div>
</div>

// css

.box{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.content{
    position: relative;
    top:0;
    left: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.scroll-box{
    position: absolute;
    top:0;
    left: 0;
    width:100%;
}
.item{
    width:100%;
    height:500px;
}
.bottom-btn{
    height:4rem;
}

21.vue中記錄上瀏覽位置的方法

場(chǎng)景描述： 在當(dāng)前頁(yè)面瀏覽時(shí)，點(diǎn)擊進(jìn)入其他頁(yè)面，再返回時(shí)希望滾動(dòng)到瀏覽時(shí)的位置

解決方案：

1. 利用本地存儲(chǔ)（或者cookie）

• 使用Storage(本地存儲(chǔ))， 在進(jìn)入其他頁(yè)面之前記錄當(dāng)前的滾動(dòng)位置

// some click event
let scrollTop = targetDom.scrollTop
sessionStorage.setItem('scrollTop', scrollTop)

• 返回頁(yè)面的時(shí)候獲取到上次的位置，并重新設(shè)置dom的滾動(dòng)位置

import { domSetScrollTop } from '@/utils/dom.js'

// vue生命周期mounted
mounted:{
  let scrollTop = sessionStorage.getItem('scrollTop')
  if(!scrollTop) {
       scrollTop = 0
  }
  domSetScrollTop(this.$refs.content, scrollTop)
}

// utils/dom.js
export function domSetScrollTop(dom, scrollTop) {
  dom.scrollTop = scrollTop
}

缺點(diǎn)：在回到當(dāng)前頁(yè)面的時(shí)候，在獲取本地存儲(chǔ)的時(shí)候會(huì)浪費(fèi)時(shí)間，以及頁(yè)面渲染的時(shí)間，會(huì)導(dǎo)致回到上次的位置并不是很準(zhǔn)確。所以采取了下面這種方式來(lái)實(shí)現(xiàn)。

2 . 使用vue路由中的元信息進(jìn)行存儲(chǔ)（使用vuex的放在全局也可以進(jìn)行存儲(chǔ)，沒(méi)有試驗(yàn)應(yīng)該算一個(gè)思路）

// CurrentPage.vue
// utils
import { domSetScrollTop } from '@/utils/dom.js'
//mixins
import { metaScroll } from '@/components/mixins/metaScroll'
  
 mixins:[metaScroll], //記錄位置
 methods:{
    handleClick(sku_id){
      this.setRouteMeta('scrollTop', this.$refs.content.scrollTop)
      this.$router.push({name:'ProfilePicture',params: { id }})
    },
    _setScrollTop(){
        let scrollTop = this.getRouteMeta().scrollTop
        if(!scrollTop) {
          scrollTop = 0
        }
     domSetScrollTop(this.$refs.content, scrollTop)
    },
  },
  mounted() {
    this._setScrollTop()
  },

// mixins/scrollTop.js
export const metaScroll =  {
  methods:{
    getRouteMeta() {
      return this.$route.meta
    },
    setRouteMeta(attribute, val){
      this.$route.meta[attribute] = val
    }
  }
}

// utils/dom.js
export function domSetScrollTop(dom, scrollTop) {
  dom.scrollTop = scrollTop
}

// router/index.js
{
    path: '/CurrentPage',
    name: 'CurrentPage',
    component: CurrentPage,
    meta:{
      scrollTop:0
    }
},

3 . 使用 vue-router的滾動(dòng)行為

滾動(dòng)行為

使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。

注意: 這個(gè)功能只在支持 history.pushState 的瀏覽器中可用。

當(dāng)創(chuàng)建一個(gè) Router 實(shí)例，你可以提供一個(gè) scrollBehavior 方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動(dòng)到哪個(gè)的位置
  }
})

scrollBehavior 方法接收 to 和 from 路由對(duì)象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過(guò)瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。

這個(gè)方法返回滾動(dòng)位置的對(duì)象信息，長(zhǎng)這樣：

• { x: number, y: number }
• { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一個(gè) falsy (譯者注：falsy 不是 false，參考這里)的值，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)。

舉例：

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

對(duì)于所有路由導(dǎo)航，簡(jiǎn)單地讓頁(yè)面滾動(dòng)到頂部。

返回 savedPosition，在按下 后退/前進(jìn) 按鈕時(shí)，就會(huì)像瀏覽器的原生表現(xiàn)那樣：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如果你要模擬『滾動(dòng)到錨點(diǎn)』的行為：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

我們還可以利用路由元信息更細(xì)顆粒度地控制滾動(dòng)。查看完整例子請(qǐng)移步這里。

異步滾動(dòng)

2.8.0 新增

你也可以返回一個(gè) Promise 來(lái)得出預(yù)期的位置描述：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

將其掛載到從頁(yè)面級(jí)別的過(guò)渡組件的事件上，令其滾動(dòng)行為和頁(yè)面過(guò)渡一起良好運(yùn)行是可能的。但是考慮到用例的多樣性和復(fù)雜性，我們僅提供這個(gè)原始的接口，以支持不同用戶場(chǎng)景的具體實(shí)現(xiàn)。