<template>
<view class="page">
<view class="notice">
<view class="notice-icon"><i-icon name="news-fill" :size="24" color="#f56c6c"></i-icon></view>
<view class="notice-scorll" @tap="openNoticeDetail">
<view class="content" :class="[animation?'anim':'']">B站10分日本动漫已消失，9.9分仅剩12部，这一部动漫包揽三席！</view>
</view>
</view>
</view>
</template>
<script>
import { reactive, toRefs, computed, onMounted } from 'vue'
export default {
setup(props, context) {
const state = reactive({
animation:true
})
return {
...toRefs(state)
}
}
}
</script>
<style lang="scss" scoped>
.notice {
width: 100%;
box-sizing: border-box;
padding: 0 30rpx;
font-size: 24rpx;
height: 60rpx;
background-color: #fff8d5;
display: flex;
align-items: center;
position: fixed;
top: 0;
z-index: 1000;
&-scroll {
flex: 1;
margin-left: 20rpx;
line-height: 1;
white-space: nowrap;
overflow: hidden;
color: $u-error;
.content {
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
transform: translate3d(100%, 0, 0);
&.anim {
-webkit-animation: rolling 12s linear infinite;
animation: rolling 12s linear infinite;
}
}
}
}
</style>
sonicsunsky
- 发布：2021-12-15 11:37
- 更新：2021-12-17 16:54
- 阅读：757
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： Mac Monterey 12.0.1
HBuilderX类型： Alpha
HBuilderX版本号： 3.3.1
第三方开发者工具版本号： 1.05.2111300
基础库版本号： 2.21.0
项目创建方式： HBuilderX
示例代码：
操作步骤：
运行微信小程序成功后更改某个页面里的样式后保存刷新
运行微信小程序成功后更改某个页面里的样式后保存刷新
预期结果：
微信小程序刷新后页面显示正常
微信小程序刷新后页面显示正常
实际结果：
微信小程序刷新后页面显示异常
微信小程序刷新后页面显示异常
bug描述：
修改页面scss样式保存后，项目差量编译后刷新微信小程序页面显示异常，样式会有错乱
更新到最新hbuildx 3.3.1.20211214-alpha 版本之后出现这个问题，上一个版本没有这个问题
增加部分scss样式编译后并没有生效，查看IDE开发工具发现新增加的css样式没有拷贝过来
第一个图片是增加scss样式没有生效，第二个图片是改动scss样式后，重新点击IDE开发工具的编译按钮刷新，发现项目首页样式错乱
需要hbuilderX重新运行才能恢复正常
未重现，建议发送一个测试工程，说明测试步骤
-
-
-
-
-
-
sonicsunsky (作者)
回复 DCloud_UNI_FXY: 测试环境是微信小程序开发工具1.0.5 2111300+vue3.x+Hbuilderx 3.3.2.20211218-alpha+Mac monterey
2021-12-20 17:35
-
回复 sonicsunsky:
测试没问题，运行至微信开发工具：1.06.2110290，修改 index.vue 中的样式，小程序会同步更新
HBuilderX 3.3.2.20211218-alpha
macOS Monterey 12.12021-12-20 17:59
-
-
回复 sonicsunsky: 提供的 demo 类名书写错误。且使用 alpha 3.3.2 运行至 mp-weixin 后，修改样式并没有复现你说的问题
2021-12-21 16:38
-
sonicsunsky (作者)
scss样式修改后保存刷新或者点击IDE开发工具的编译按钮后页面会发生异常，在上一个版本的时候是正常的
2021-12-20 16:14
sonicsunsky (作者)
上边第二个图就是改动某个页面scss样式后首页发生的异常
2021-12-20 16:16