先看效果
先获取胶囊按钮的位置数据,并且进行赋值
import {
onMounted,
reactive,
toRefs
} from 'vue';
const search_data = reactive({
S_height: 0, //胶囊按钮的高度
S_top: 0, //胶囊按钮距离顶部的高度
Custom_height: 0, //上两个的和
})
const {
S_height,
S_top,
Custom_height
} = toRefs(search_data);
function capSule() {
const but_data = wx.getMenuButtonBoundingClientRect()
search_data.S_top = but_data.top
search_data.S_height = but_data.height
search_data.Custom_height = but_data.top + but_data.height
};
onMounted(() => {
capSule();
});
html代码
<view :style=" 'height:' + Custom_height + 'px;' ">
<view :style=" 'height:' + S_top + 'px;' "></view>
<view :style="['height:' + S_height + 'px;', 'line-height:' + S_height + 'px;', 'padding-left:' + '10px']">
火星移民第一商店</view>
</view>