复制代码 <view class="content">
<view id="moved-box"></view>
<view id="btn" bind:tap="tap">点击驱动小球移动</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
};
},
onLoad() {
console.log(this);
const offset = wx.worklet.shared(0);
this.applyAnimatedStyle('#moved-box', () => {
'worklet';
return {
transform: `translateX(${offset.value}px)`
};
});
this._offset = offset;
},
methods: {
tap() {
// 点击时修改 sharedValue 值,驱动小球移动
this._offset.value = Math.random();
}
}
};
</script>

- 发布:2023-11-01 15:41
- 更新:2023-11-02 09:27
- 阅读:1081
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 11 家庭版 22621.2428
HBuilderX类型: 正式
HBuilderX版本号: 3.8.4
第三方开发者工具版本号: Stable 1.06.2308310
基础库版本号: 3.1.4
项目创建方式: HBuilderX
示例代码:
操作步骤:
微信小程序开启 Skyline 渲染模式:
pages.json:
复制代码 {
"path": "pages/index/index",
"style": {
"navigationStyle": "custom",
"renderer": "skyline",
"disableScroll": true,
"componentFramework": "glass-easel"
}
}
],
manifest.json:
复制代码 "appid" : "",
"setting" : {
"urlCheck" : false,
"es6" : true
},
"usingComponents" : true,
"lazyCodeLoading" : "requiredComponents",
"rendererOptions" : {
"skyline" : {
"defaultDisplayBlock" : false,
"defaultContentBox" : false
}
}
},
微信开发者工具, 开启Skyline 渲染调试
微信小程序开启 Skyline 渲染模式:
pages.json:
复制代码 {
"path": "pages/index/index",
"style": {
"navigationStyle": "custom",
"renderer": "skyline",
"disableScroll": true,
"componentFramework": "glass-easel"
}
}
],
manifest.json:
复制代码 "appid" : "",
"setting" : {
"urlCheck" : false,
"es6" : true
},
"usingComponents" : true,
"lazyCodeLoading" : "requiredComponents",
"rendererOptions" : {
"skyline" : {
"defaultDisplayBlock" : false,
"defaultContentBox" : false
}
}
},
微信开发者工具, 开启Skyline 渲染调试
预期结果:
成功调用 this.applyAnimatedStyle 方法, 且点击按钮能使小球移动
成功调用 this.applyAnimatedStyle 方法, 且点击按钮能使小球移动
实际结果:
控制台报错:
复制代码vendor.js? [sm]:4023 [Vue warn]: Error in onLoad hook: "TypeError: this.applyAnimatedStyle is not a function"
(found in pages/index/index.vue)(env: Windows,mp,1.06.2308310; lib: 3.1.5)
控制台报错:
复制代码vendor.js? [sm]:4023 [Vue warn]: Error in onLoad hook: "TypeError: this.applyAnimatedStyle is not a function"
(found in pages/index/index.vue)(env: Windows,mp,1.06.2308310; lib: 3.1.5)
bug描述:
uniapp vue2 编译到微信小程序, 开启微信小程序的Skyline, 无法调用 this.applyAnimatedStyle 方法
Yannis_ (作者)
下载了Demo进行调试, index.vue 中的 this.applyAnimatedStyle 依然会报错undefined. 使用wxcomponents不会报错.
hx3.8.4
2023-11-02 11:04
zZZ1Ma
回复 Yannis_: this.$scope.applyAnimatedStyle()
2023-11-02 14:20
Yannis_ (作者)
回复 zZZ1Ma: 感谢
2023-12-26 10:23