UED小程序项目记录Day11
本文最后更新于355 天前,其中的信息可能已经过时,如有错误请发送邮件到1986413837@qq.com

1.昨日遗留问题解决 — 在Pinia仓库中不要请求数据了啊 写一个同步方法在首页请求到数据后存储不就完了吗

import {
	defineStore
} from 'pinia';
import {
	ref
} from 'vue';

export const useInformationStore = defineStore('news', () => {
	const informationData = ref([]); // 存储资讯数据
	// 获取资讯数据的方法
	// const fetchInfomationData = async () => {
	// 	const response = await apiGetHomeData();
	// 	informationData.value = response.informationList;
	// };
	// 手动设置数据的方法
	const fetchData = (data) => {
		informationData.value = data;
	};
	// 返回 state 和方法
	return {
		informationData,
		fetchData
	};
}, {
	persist: true // 正确传递持久化选项
});

2.Pinia持久化语法别写错了 要和仓库主体分开写的

defineStore( ‘storeName’ ,( )=>{ 仓库内容 , return { 要供全局使用的变量 } } , { persist : true } )

3.实现navigator不跳转而是显示客服卡牌功能

这部分除了第一个都是链接跳转 平台客服卡片点击后是出现一个popup卡片 一开始是用数组遍历navigator渲染的 所以问题在于给第一个卡片添加点击事件并且不跳转

才开始想使用e.preventDefalut阻止跳转 但是不可以 因为Uniapp有限制

uni-app 的 navigator 组件底层是原生导航,无法通过 DOM 事件阻止默认行为

后面改使用动态路由 根据遍历的index设置路由和是否触发事件

<navigator v-for="(item,index)  in itemList" :url="index === 0 ? '' : item.navigateUrl"
	:key="index + 'index'" class="line_item" @click="index === 0?openPop() : null">
	<view class="line_box">
		<view :class="`iconBox${index+1}`">
		</view>
		<view class="">
			{{ item.text }}
		</view>
	</view>
</navigator>

4.父组件触发子组件事件

因为popup组件多处使用 我将其封装为组件 popup组件内部是有函数的 所以在首页点击想要出现popup需要调用子组件的方法 在子组件中通过defineExpose暴露即可

//子组件
import {
	ref
} from 'vue'
const popup = ref()
//联系客服弹窗
const open = () => {
	console.log(1);
	popup.value.open('center')
}
defineExpose({
	open
}) //暴露出要给父组件使用的方法

父组件中通过ref绑定组件使用子组件方法

//template
<PopUp ref="pop"></PopUp>  
//JS
const pop = ref(null)
const openPop = (index) => {
	if (pop.value) {
		pop.value.open()
	}
}

5.从今天开始我就20岁了 把我的网站小小装饰了一下 就当是放松放松啦

6.用LiveServer打开网页 进入的端口总是一个文件夹 不能直接打开网页 十分令人烦躁 搞了很久没搞好

换了一个新插件就行了Preview on Web Server 感觉还不错

爽了……

Life's a struggle, I'll conquer it.
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇