脚本宝典收集整理的这篇文章主要介绍了mpvue骨架屏、vue骨架屏、微信小程序骨架屏、svg骨架屏【分享笔记】,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
mpvue小程序骨架屏
可查看这篇文章《小程序骨架屏》
原生微信小程序wxml骨架屏
可参考作者腾讯的git项目:《skeleton》
svg骨架屏(图片会变形)
vue-content-loader使用svn图片做成骨架屏,然后判断是否有数据,进行显示隐藏
![图片上传中...]
vue骨架屏
vue-skeleton-webpack-plugin 骨架屏框架,多种样式
可参考这个文章《vue-cli 构建的项目如何加入骨架屏 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的。可以判断当前的数组是否为空,再渲染默认数据,如果数组真没数据时,于把默认数据去除,显示暂无数据页面。
如果帮助到您,给个赞或收藏吧!!!!!!!!!!!!
以上是脚本宝典为你收集整理的mpvue骨架屏、vue骨架屏、微信小程序骨架屏、svg骨架屏【分享笔记】全部内容,希望文章能够帮你解决mpvue骨架屏、vue骨架屏、微信小程序骨架屏、svg骨架屏【分享笔记】所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。