惠州企業(yè)網(wǎng)站seo公司,大良營銷網(wǎng)站建設(shè)好么,wordpress 后臺 空白,在建工程查詢網(wǎng)站描述問題 輪播****圖循環(huán)異常 你想要什么效果 請求完接口數(shù)據(jù)后#xff0c;數(shù)據(jù)渲染為輪播圖#xff0c;而且輪播圖能循環(huán)播放 哪個地方不是你預(yù)期的效果 請求完接口數(shù)據(jù)后#xff0c;輪播圖也能正常輪播#xff0c;但是播放到最后一幅后#xff0c;不再循環(huán)播放 解…描述問題輪播****圖循環(huán)異常你想要什么效果請求完接口數(shù)據(jù)后數(shù)據(jù)渲染為輪播圖而且輪播圖能循環(huán)播放哪個地方不是你預(yù)期的效果請求完接口數(shù)據(jù)后輪播圖也能正常輪播但是播放到最后一幅后不再循環(huán)播放解決方案在swiper組件上添加 v-if“swiperList.length”分析原理如果沒有加 v-if在接口數(shù)據(jù)到來之前swiper已經(jīng)初始化此時數(shù)據(jù)為[], loop選項是針對空數(shù)據(jù)的循環(huán)控制而獲取數(shù)據(jù)之后雖然觸發(fā)了視圖更新但只更新swiper-slide,而沒有更新swiper配置,所以循環(huán)失效如果加了v-if在接口數(shù)據(jù)到來之前因為swiper上有v-if的判斷此時數(shù)據(jù)為[]所以swiper組件根本沒有初始化。而獲取數(shù)據(jù)后v-if判斷為真引時觸發(fā)視圖更新就是針對所有圖片的loop設(shè)置vue3項目開發(fā)中注意事項**配置css和js安裝重置樣式normalize.cssnpm i normalize.css移動端適配js復(fù)制flexible.js到src/assets文件夾中引入圖標字體在assets/fonts中存入圖標字體文件在assets/css中存入iconfont.css, 并修正路徑定義全局css在assets/css中創(chuàng)建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規(guī)定屏幕寬度 750App.vue的style標簽中去掉scoped屬性在任意組件中使用圖標字體i classiconfont icon-kefu/i處理本地靜態(tài)資源div classlogo pbutton切換圖片/button/p pimg :srcurl alt/p !-- pimg src../../../assets/img/m_hualogo.png alt/p -- /divscript //引用本地靜態(tài)資源模塊 import logo from ../../../assets/img/m_hualogo.png export default { data() { return { //引用本地靜態(tài)資源不能使用下面的方式 // 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. 使用當(dāng)前資源 // 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