mpvue骨架屏、vue骨架屏、微信小程序骨架屏、svg骨架屏【分享筆記】

mpvue小程序骨架屏

可查看這篇文章《小程序骨架屏》

原生微信小程序wxml骨架屏

可參考做者騰訊的git項目：《skeleton》

svg骨架屏(圖片會變形)

vue-content-loader使用svn圖片作成骨架屏，而後判斷是否有數據，進行顯示隱藏

![圖片上傳中...]

vue骨架屏

vue-skeleton-webpack-plugin 骨架屏框架，多種樣式

方法一：（SPA 中單個 Skeleton）

可參考這個文章《vue-cli 構建的項目如何加入骨架屏 skeleton》

方法二：（SPA 中多個 Skeleton）

這裏和方法一相同的建立和build裏建立流程同樣。主要修改的裏面的代碼：

src下建立2種骨架屏展現，而後可根據不一樣路由頁面，進行顯示其餘一種，下面實現路由分配

/build/webpack.skeleton.conf.js 修改成：

'use strict';

const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

function resolve(dir) {
  return path.join(__dirname, dir)
}

let skeletonWebpackConfig = merge(baseWebpackConfig, {
  target: 'node',
  devtool: false,
  entry: {
    app: resolve('../src/entry-skeleton.js')
  },
  output: Object.assign({}, baseWebpackConfig.output, {
    libraryTarget: 'commonjs2'
  }),
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: []
})

// important: enable extract-text-webpack-plugin
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
}),

module.exports = skeletonWebpackConfig

/build/webpack.dev.conf.js 和 /build/webpack.prod.conf.js 修改成

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')




// inject skeleton content(DOM & CSS) into HTML
new SkeletonWebpackPlugin({
  webpackConfig: require('./webpack.skeleton.conf'),
  quiet: true,
  minimize: true,
  router: {
    mode: 'hash',
    routes: [
      {
        path: '/page1',
        skeletonId: 'skeleton1'
        },
        {
          path: '/',
          skeletonId: 'skeleton2'
        },
    ]
  }
}),

由上可看到，SPA 中多個骨架屏，可根據路由進行渲染不一樣的骨架模塊。

若是遇到v-for/wx:for，列表的，若是動態數據，我的建議是能夠寫個默認數據，由於骨架屏是須要數據纔能有標籤，再增長class的。能夠判斷當前的數組是否爲空，再渲染默認數據，若是數組真沒數據時，於把默認數據去除，顯示暫無數據頁面。

若是幫助到您，給個贊或收藏吧！！！！！！！！！！！！