网站开发设计实训实训总结,wordpress登录工具,平面素材网,ASP做旅游网站代码1. 自动生成骨架屏代码 在微信开发者工具中#xff0c;预览界面点击生成骨架屏 确定后#xff0c;会自动打开骨架屏代码文件 pages\index\index.skeleton.wxml 2. 将骨架屏代码转换为vue文件 在项目中新建文件 src\pages\index\components\skeleton.vue 将pages\index\index… 1. 自动生成骨架屏代码 在微信开发者工具中预览界面点击生成骨架屏 确定后会自动打开骨架屏代码文件 pages\index\index.skeleton.wxml 2. 将骨架屏代码转换为vue文件 在项目中新建文件 src\pages\index\components\skeleton.vue 将pages\index\index.skeleton.wxml中的代码复制到 skeleton.vue 中 删除所有的注释和无接口访问的部分如顶部的导航栏如下图所示通过 is 属性可以轻松辨别出各个组件对应的骨架屏代码。 scroll-view 标签也删除只留接口更新内容的静态骨架屏代码在skeleton.vue的 template 标签外新建 style 标签将微信开发者工具生成的骨架屏相关的css代码 pages\index\index.skeleton.wxss中复制到项目文件 skeleton.vue的 style 标签中删除所有的注释
最终范例代码如下 src\pages\index\components\skeleton.vue
template nameskeletonview iscomponents/SUI_Swiperview classcarousel Swiper--carouselswiper interval3000 circulartrue current0 autoplayfalseswiper-itemstyleposition: absolute;width: 100%;height: 100%;transform: translate(0%, 0px) translateZ(0px);navigator classnavigator Swiper--navigator hover-classnone open-typenavigateimage classimage Swiper--image sk-image modeaspectFill/image/navigator/swiper-item/swiperview classindicator Swiper--indicatortext classdot Swiper--dot active Swiper--active/texttext classdot Swiper--dot/texttext classdot Swiper--dot/texttext classdot Swiper--dot/texttext classdot Swiper--dot/text/view/view/viewview ispages/index/components/CategoryPanelview classcategory CategoryPanel--categorynavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-543 sk-text居家/text/navigatornavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-231 sk-text锦鲤/text/navigatornavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-820 sk-text服饰/text/navigatornavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-396 sk-text母婴/text/navigatornavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-960 sk-text个护/text/navigatornavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-548 sk-text严选/text/navigatornavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-816 sk-text数码/text/navigatornavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-7 sk-text运动/text/navigatornavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-68 sk-text杂项/text/navigatornavigator classcategory-item CategoryPanel--category-item hover-classnoneimage classicon CategoryPanel--icon sk-image/imagetext classtext CategoryPanel--text sk-transparent sk-text-14-2857-539 sk-text品牌/text/navigator/view/viewview iscomponents/SUI_Guess classrview classcaption Guess--captiontextclasstext Guess--text sk-transparent sk-text-0-0000-556 sk-text sk-pseudo sk-pseudo-circle猜你喜欢/text/viewview classguess Guess--guessnavigator classguess-item Guess--guess-itemimage classimage Guess--image sk-image modeaspectFill/imageview classname Guess--name sk-transparent sk-text-14-2857-479 sk-text极光限定 珠光蓝珐琅锅/view/navigatornavigator classguess-item Guess--guess-itemimage classimage Guess--image sk-image modeaspectFill/imageview classname Guess--name sk-transparent sk-text-14-2857-647 sk-text法式清新长袖格纹连衣裙/衬衫110-160cm/view/navigator/view/view
/templatestyle
.sk-transparent {color: transparent !important;
}
.sk-text-14-2857-484 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 43.1159rpx;position: relative !important;
}
.sk-text {background-origin: content-box !important;background-clip: content-box !important;background-color: transparent !important;color: transparent !important;background-repeat: repeat-y !important;
}
.sk-text-3-3333-275 {background-image: linear-gradient(transparent 3.3333%,#eeeeee 0%,#eeeeee 96.6667%,transparent 0%) !important;background-size: 100% 27.1739rpx;position: relative !important;
}
.sk-text-14-2857-543 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-231 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-820 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-396 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-960 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-548 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-816 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-7 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-68 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-539 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-0-0000-556 {background-image: linear-gradient(transparent 0%,#eeeeee 0%,#eeeeee 100%,transparent 0%) !important;background-size: 100% 30.7971rpx;position: relative !important;
}
.sk-text-14-2857-479 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-text-14-2857-647 {background-image: linear-gradient(transparent 14.2857%,#eeeeee 0%,#eeeeee 85.7143%,transparent 0%) !important;background-size: 100% 35.5072rpx;position: relative !important;
}
.sk-image {background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {background: #efefef !important;background-image: none !important;color: transparent !important;border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {border-radius: 50% !important;
}
.sk-container {position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;background-color: transparent;
}
/style3. 导入并使用骨架屏vue文件 src\pages\index\index.vue
import Skeleton from ./components/skeleton.vue// 默认显示骨架屏
const loading ref(true)
onLoad(async () {// 加载数据--所有接口同时开始刷新直到耗时最长的接口返回数据await Promise.all([getSwiperInfo(), getCategoryInfo()])// 加载数据成功后隐藏骨架屏显示数据loading.value false
})
