小程序
小游戏
企业微信
微信支付
扫描小程序码分享
这里在iPhone中不能获取到margin-left的值啊！！！怎么办，那个值是动态的，但是在模拟器上就没问题，我用的0913版本，最新的基础库
13 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
机型的话，iPhone真机测试了5s，6s都不行，安卓没问题，问题应该在@keyframes这里的变量获取不到，微信版本是6.5.13
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
wxml
<view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em"> <view class="marquee_text">{{marquee.text}}</view></view>--marqueeWidth是给@keyframes传的变量wxss：
<view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em"> <view class="marquee_text">{{marquee.text}}</view>
</view>
--marqueeWidth是给@keyframes传的变量
wxss：
@keyframes around {
from {
margin-left: 100%;
}
to {
margin-left: var(--marqueeWidth--);
.marquee_container {
background-color: #0099FF;
font-size: 30rpx;
height: 2.2em;
position: relative;
width: 424rpx;
margin-top: 55rpx;
overflow: hidden;
.marquee_text {
width: 100%;
display: inline-block;
white-space: nowrap;
animation-name: around;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
.js
data:{
// 文字滚动
marquee: { text: '哈哈哈哈哈哈哈哈！2哈哈哈哈哈哈哈！3哈哈哈哈哈哈哈哈哈哈哈哈！' },
getWidth: (str) => {
return [].reduce.call(str, (pre, cur, index, arr) => {
if (str.charCodeAt(index) > 255) {// charCode大于255是汉字
pre++;
} else {
pre += 0.5;
return pre;
}, 0);
},
getDuration: (str) => {// 保留，根据文字长度设置时间
return this.getWidth() / 10;
onLoad: function () {
const str = this.data.marquee.text;
const width = this.getWidth(str);
// console.log('width', width);
this.setData({
[`${'marquee'}.width`]: width
});
@官方
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
机型的话，iPhone真机测试了5s，6s都不行，安卓没问题，问题应该在@keyframes这里的变量获取不到，微信版本是6.5.13
wxml
<view class="marquee_container" style="--marqueeWidth--:{{-marquee.width}}em"> <view class="marquee_text">{{marquee.text}}</view></view>--marqueeWidth是给@keyframes传的变量wxss：
@keyframes around {
from {
margin-left: 100%;
}
to {
margin-left: var(--marqueeWidth--);
}
}
.marquee_container {
background-color: #0099FF;
font-size: 30rpx;
height: 2.2em;
position: relative;
width: 424rpx;
margin-top: 55rpx;
overflow: hidden;
}
.marquee_text {
position: relative;
width: 100%;
height: 2.2em;
display: inline-block;
white-space: nowrap;
animation-name: around;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.js
data:{
// 文字滚动
marquee: { text: '哈哈哈哈哈哈哈哈！2哈哈哈哈哈哈哈！3哈哈哈哈哈哈哈哈哈哈哈哈！' },
// 文字滚动
}
// 文字滚动
getWidth: (str) => {
return [].reduce.call(str, (pre, cur, index, arr) => {
if (str.charCodeAt(index) > 255) {// charCode大于255是汉字
pre++;
} else {
pre += 0.5;
}
return pre;
}, 0);
},
getDuration: (str) => {// 保留，根据文字长度设置时间
return this.getWidth() / 10;
},
// 文字滚动
onLoad: function () {
// 文字滚动
const str = this.data.marquee.text;
const width = this.getWidth(str);
// console.log('width', width);
this.setData({
[`${'marquee'}.width`]: width
});
// 文字滚动
},
@官方