<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import { ref } from "vue";
onLaunch(() => {
console.log("App Launch");
});
onShow(() => {
console.log("App Show");
});
onHide(() => {
console.log("App Hide");
});
const systemInfo = uni.getSystemInfoSync();
const windowWidth = ref(`${systemInfo.windowWidth}px`);
const windowHeight = ref(`${systemInfo.windowHeight}px`);
console.log(windowWidth, windowHeight);
</script>
<style lang="scss">
@import "@dcloudio/uni-ui/lib/uni-scss/index.scss";
@import "./style/base.scss";
@for $i from 1 through 100 {
.b-#{$i}vw {
width: calc(v-bind("windowWidth") * ($i / 100));
}
.b-#{$i}vh {
height: calc(v-bind("windowHeight") * ($i / 100));
}
@for $ii from 1 through 100 {
// $value: $i + ($ii / 100);
.b-#{$i}-#{$ii}vw {
width: calc(v-bind("windowWidth") * ($i + $ii / 100));
}
.b-#{$i}-#{$ii}vh {
height: calc(v-bind("windowHeight") * ($i + $ii / 100));
}
}
}
</style>
- 发布:2023-05-18 14:59
- 更新:2023-05-18 14:59
- 阅读:175
产品分类: uniapp/H5
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 12.6.3
浏览器平台: Edge
浏览器版本: 111.0.1661.54
项目创建方式: CLI
CLI版本号: 3.0.0-alpha-3070720230316001
示例代码:
操作步骤:
<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import { ref } from "vue";
onLaunch(() => {
console.log("App Launch");
});
onShow(() => {
console.log("App Show");
});
onHide(() => {
console.log("App Hide");
});
const systemInfo = uni.getSystemInfoSync();
const windowWidth = ref(`${systemInfo.windowWidth}px`);
const windowHeight = ref(`${systemInfo.windowHeight}px`);
console.log(windowWidth, windowHeight);
</script>
<style lang="scss">
@import "@dcloudio/uni-ui/lib/uni-scss/index.scss";
@import "./style/base.scss";
@for $i from 1 through 100 {
.b-#{$i}vw {
width: calc(v-bind("windowWidth") * ($i / 100));
}
.b-#{$i}vh {
height: calc(v-bind("windowHeight") * ($i / 100));
}
@for $ii from 1 through 100 {
// $value: $i + ($ii / 100);
.b-#{$i}-#{$ii}vw {
width: calc(v-bind("windowWidth") * ($i + $ii / 100));
}
.b-#{$i}-#{$ii}vh {
height: calc(v-bind("windowHeight") * ($i + $ii / 100));
}
}
}
</style>
<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import { ref } from "vue";
onLaunch(() => {
console.log("App Launch");
});
onShow(() => {
console.log("App Show");
});
onHide(() => {
console.log("App Hide");
});
const systemInfo = uni.getSystemInfoSync();
const windowWidth = ref(`${systemInfo.windowWidth}px`);
const windowHeight = ref(`${systemInfo.windowHeight}px`);
console.log(windowWidth, windowHeight);
</script>
<style lang="scss">
@import "@dcloudio/uni-ui/lib/uni-scss/index.scss";
@import "./style/base.scss";
@for $i from 1 through 100 {
.b-#{$i}vw {
width: calc(v-bind("windowWidth") * ($i / 100));
}
.b-#{$i}vh {
height: calc(v-bind("windowHeight") * ($i / 100));
}
@for $ii from 1 through 100 {
// $value: $i + ($ii / 100);
.b-#{$i}-#{$ii}vw {
width: calc(v-bind("windowWidth") * ($i + $ii / 100));
}
.b-#{$i}-#{$ii}vh {
height: calc(v-bind("windowHeight") * ($i + $ii / 100));
}
}
}
</style>
预期结果:
预期应该是在全局中生效
预期应该是在全局中生效
实际结果:
全局中无效。疑似在渲染时,未将app.vue中声明的变量加入页面,导致app.vue中的全局css样式无法生效
全局中无效。疑似在渲染时,未将app.vue中声明的变量加入页面,导致app.vue中的全局css样式无法生效
bug描述:
在app.vue的 style 中 声明的变量如果使用v-bind 无法在全局生效
0 个回复