网站备案和服务器备案西安市长安区规划建设局网站

网站备案和服务器备案,西安市长安区规划建设局网站,如何在百度建立自己的网站,电商平台运营描述问题 轮播****图循环异常 你想要什么效果 请求完接口数据后#xff0c;数据渲染为轮播图#xff0c;而且轮播图能循环播放 哪个地方不是你预期的效果 请求完接口数据后#xff0c;轮播图也能正常轮播#xff0c;但是播放到最后一幅后#xff0c;不再循环播放 解…描述问题轮播****图循环异常你想要什么效果请求完接口数据后数据渲染为轮播图而且轮播图能循环播放哪个地方不是你预期的效果请求完接口数据后轮播图也能正常轮播但是播放到最后一幅后不再循环播放解决方案在swiper组件上添加 v-if“swiperList.length”分析原理如果没有加 v-if在接口数据到来之前swiper已经初始化此时数据为[], loop选项是针对空数据的循环控制而获取数据之后虽然触发了视图更新但只更新swiper-slide,而没有更新swiper配置,所以循环失效如果加了v-if在接口数据到来之前因为swiper上有v-if的判断此时数据为[]所以swiper组件根本没有初始化。而获取数据后v-if判断为真引时触发视图更新就是针对所有图片的loop设置vue3项目开发中注意事项**配置css和js安装重置样式normalize.cssnpm i normalize.css移动端适配js复制flexible.js到src/assets文件夹中引入图标字体在assets/fonts中存入图标字体文件在assets/css中存入iconfont.css, 并修正路径定义全局css在assets/css中创建global.css,定义全局样式在main.js中引入以下文件 以便全局使用// 引入重置样式 import normalize.css import ./assets/css/global.css import ./assets/css/iconfont.css // 引入rem适配的js import ./assets/flexible修改px-to-rem插件的配置基准font-size 75规定屏幕宽度 750App.vue的style标签中去掉scoped属性在任意组件中使用图标字体i classiconfont icon-kefu/i处理本地静态资源div classlogo pbutton切换图片/button/p pimg :srcurl alt/p !-- pimg src../../../assets/img/m_hualogo.png alt/p -- /divscript //引用本地静态资源模块 import logo from ../../../assets/img/m_hualogo.png export default { data() { return { //引用本地静态资源不能使用下面的方式 // url: ../../../assets/img/m_hualogo.png url: logo, // 线上地址有效 // url: https://m.hua.com/content/vue/login/static/img/m_hualogo.png } } } /script拼接script setup let imgurl baidu_logo.png; var icon new URL(../assets/imgs/${imgurl}, import.meta.url) change(){ // 2. 使用当前资源 // this.url logo; this.url new URL(../../assets/images/m_home_logo.png, import.meta.url); } /script template div classimgs img :srcicon alt /div /templatevite 中使用 配置路径别名修改vite.config.jsimport { defineConfig } from vite; import vue from vitejs/plugin-vue; import path from path // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { //启动热更新 hmr: true, }, resolve: { // 配置路径别名 alias: { : path.resolve(__dirname, ./src), }, }, });Sass****的使用全局引入****sasssrc/assets/scss/common.scss$$green: #0f0; ul,li { list-style: none; background-color: $$green; }在main.js中引入import /assets/scss/common.scss在指定组件中引入****sasssrc/assets/scss/variables.scss 定义全量$bg: rgb(17, 24, 152);在组件中引入style langscss import ./assets/scss/variables.scss; $light: #f00; .app { width: 5rem; border: 1px solid $ light; background-color: $bg; } /style