提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
uniapp(vue3.2语法糖)尝试使用pinia
获取uniapp中胶囊的top值,自定义搜索框高度与其相同
一、main.js中引入pinia
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
export function createApp() {
const app = createSSRApp(App);
app.use(Pinia.createPinia());
return {
app,
Pinia,
}
}
链接:添加链接描述
二、创建store
1.目录store/pinia.js
代码如下(示例):
import { defineStore } from 'pinia';
import {ref} from 'vue'
export const useStore = defineStore('usePinia', () => {
//变量
const menuButtonInfoHight=ref(0);
//函数
const setHeight=()=>{
//获取uniapp微信小程序胶囊按钮的top值赋值给变量
menuButtonInfoHight.value = uni.getMenuButtonBoundingClientRect().top;
}
return {menuButtonInfoHight,setHeight};
});
2.使用pinia中变量和函数
引入store:
import { useStore } from '@/stores/pinia.js';
const store = useStore();
在onMounted生命周期中执行pinia中定义的方法给变量高度赋值
onMounted(() => {
//获取pinia中的胶囊top值,设置到变量中
store.setHeight();
})
此时store.menuButtonInfoHight中已有值,将其作为变量给元素添加margin-top,此时元素和胶囊按钮上高度一致
<view class="topSearch" :style="'margin-top:'+store.menuButtonInfoHight+'px;'">
<text class="iconfont icon-fangdajing"></text>
<input type="text" class="search-input" />
</view>
总结
还在学习,没啥好总结的,用的不对请大家及时指正。