avm 滚动字体效果

galen-bin

本帖最后由 galen-bin 于 2021-1-15 10:49 编辑

template:
      <view class="content-wrap">
                  <view class="msg_tz">
                     <image class="notetz" src="../../image/icon/notetz.png"/>
                     <text class="notetz_msg" style={{'left:'+note_left}}>
                        {{note_msg}}
                     </text>
                  </view>

            </view>
css:

.content-wrap {
padding: 8px 0;
border-bottom:  0.8px solid #f1f1f1;
}
.msg_tz
{
display: flex;
flex-direction: row;
padding-left: 10px;

}
.notetz
{
width: 20px;
height: 20px;
position: absolute;
z-index: 1000;
left:8;
background-color: #fff;
}
.notetz_msg
{
font-size: 12px;
height: 20px;
line-height: 20px;
position: relative;
width: 100%;
padding-top: 2px;
}

js:
apiready() {

      this.note_left=this.winWidth-40;

}

,onshow() {

      this.setint=setInterval(() => {
         this.note_left-=1;
         if(this.note_left<=-(this.winWidth-40))
         {
            console.log(this.note_left);
            this.note_left=this.winWidth-40;
         }
      },30);

},
onHide(){
      clearInterval(this.setint);
}

技术咨询-F

你的代码没发完整

imo.

贡献一下AVM代码，感谢楼主提供思路

<template>
<view class="page">
<view class="walking_lantern_one">
<text class="walking_lantern_one_notetz_msg" style={{'left:'+note_left}}>
{{note_msg}}
</text>
</view>
</view>
</template>
<style>
.page{
background: #000;
width: 100%;
height: 100%;
padding-top: 100px;
}
.walking_lantern_one{
background: #fff;
flex-direction: row;
}
.walking_lantern_one_notetz_msg{
font-size: 13px;
height: 20px;
line-height: 20px;
color: #444;
width: 100%;
}
</style>
<script>
export default {
name: "walking_lantern_one",
data() {
return {
note_left:0,
winWidth:0,
note_msg:"圣诞节快圣诞节快上班都没上班的吗你水果的话术时代就开始哭的好时机肯定会接受，不得你搜不到吗你说过话就是打开"
}
},
apiready() {
this.data.winWidth = api.winWidth;
var setint = setInterval(() => {
this.data.note_left-=1;
if( this.data.note_left <= -(this.data.winWidth) ){
this.data.note_left=this.data.winWidth;
}
},30);
},
};
</script>

复制代码

移除定时器啥的都没写自己鼓捣吧

galen-bin

imo. 发表于 2021-2-4 11:50
贡献一下AVM代码，感谢楼主提供思路

onHide(){
clearInterval(this.setint);
}

galen-bin

技术支持-F 发表于 2021-2-4 11:17
你的代码没发完整

核心代码就这些