当前位置:首页 > 知识库 > 正文

微信小程序骨架屏(微信开发者工具稳定版)

示例:

微信小程序骨架屏(微信开发者工具稳定版)  第1张

此功能在vue项目上编写

文档出于Ant Design

希望各位小伙伴多多点赞收藏转发

源码给上:

首先现在项目里引入skeleton.js

vue项目引入方式

import skeleton from 'vue-skeleton-component'Vue.use(skeleton)

HTML

<template><div class="weui-panel weui-panel_access"><!-- list --><div class="article-list-div"><p style="color: rgba(0,0,0,.9);font-size: 15px;font-weight: 700;padding-left: 16px;line-height: 50px;border-bottom: 1px solid rgba(0,0,0,.1);">vue版骨架屏渲染</p><div class="article-render" v-for="item in articleList" :key="item"><div class="header-img"><img :src="item.img" alt="></div><div class="article-info"><p class="title">{{ item.title }}</p><p class="des">{{ item.des }}</p></div></div><div class="article-render" v-for="item in 10" v-show="rendering"><div class="header-img"><skeleton type='circlecom' active :options="{width: '80px'}" /></div><div class="article-info"><p class="title"></p><p class="des"><skeleton type='listcom' active :options="{row: 3,lineHight: 20}" /></p></div></div></div></div></template>

CSS

.article-render {padding: 15px;overflow: hidden;}.header-img {width: 80px;height: 80px;display: inline-block;float: left;}.header-img img{width: 100%;height: 100%;}.article-info {padding-left: 100px;}.article-info p {font-size: 20px;color: #666;}.article-info .title {margin-bottom: 5px;}.article-info .des {font-size: 14px;color: #888;}.CircleCom_OPdPNcc3,.listCom_2QHM1mDh {padding: 0;}

JS

export default {name: 'Skeleton',data() {return {articleList: [],rendering:true,}},mounted() {this.articleListRender();},methods: {articleListRender() {this.articleList = [{img: 'https://dss0.baidu.com/73t1bjeh1BF3odCf/it/u=2858001215,828905968&fm=85&s=B82356320341414110475CDE0300F0BB',title: '网页骨架屏',des: `什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示出页面的大致结构(灰色占位图),在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件,本质上是界面加载过程中的过渡效果。假如能在加载前把网页的大概轮廓预先显示,接着再逐渐加载真正内容,这样既降低了用户的焦灼情绪,又能使界面加载过程变得自然通畅,不会造成网页长时间白屏或者闪烁。这就是 Skeleton Screen !`},{img: 'https://dss0.baidu.com/73x1bjeh1BF3odCf/it/u=245465413,3123130741&fm=85&s=409708722C735BAF750BBBFB0300A02F',title: '客户端骨架屏详解',des: `一直以来,无论是Web还是iOS、Android的应用中,为了提升应用的加载等待这段时间的用户感知体验,各种技术层出不穷。其中,尤以菊花图以及由它衍生各种加载动画最为突出。对于菊花图我们自不必多说,现在对于加载的设计体验有了比菊花加载体验更棒的方法,即大家常看到的Skeleton Screen Loading,中文叫做骨架屏。`},{img: 'https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1597993201,2281568722&fm=173&app=49&f=JPEG?w=312&h=208&s=E9C23366BE27B77452E967BA0300C086',title: '迅雷X 10.1.27正式版发布:优化下载引擎',des: `IT之家12月24日消息 此前迅雷X已发布了正式版,Electron软件框架完全重写了迅雷X主界面,并且对下载引擎进行了全面的改进升级。适配了2K/4K高清屏幕,文字显示效果也变得更加清晰细腻。`},{img: 'https://pics4.baidu.com/feed/f703738da97739120882827c20b4c51e377ae2bf.jpeg" width="258" height="268 alt=二维码 title=微信二维码 src=https://www.changchenghao.cn/wp-content/uploads/2021/08/2021082203575510.jpg">

微信号:sansui663(长安复制)

发表评论