微信小程序文字滚动怎么设置
编辑:小飞燕 发布时间:2021-04-12 10:17:24
微信小程序的文字滚动怎么设置?微信小程序如何设置文字滚动效果?下面的小系列会带你看看如何设置微信小程序的文本滚动。
页面结构
一个接一个显示
{{text}}
2白边出现后显示
{{text}}
{{text}}
页面样式表。示例{
display:块;
宽度:;
height: 100rpx
}。marquee_box {
宽度:;
相对位置:
}。字幕文本{
white-space : nowrap;
位置:
top : 0;
}
射流研究…
//pages/home/marquee/marquee . js
页面({
数据: {
text: '是滚动文字,滚来滚去,哈哈哈哈哈哈哈哈',marqueepace: 1,//滚动速度
marqueedistance: 0,//初始滚动距离
marqueedistance2: 0,marquee2copy _ status: false,marquee2_margin: 60,尺寸: 14,方向: '左',//滚动方向
interval: 20 //时间间隔
},
onshow:函数{
//页面显示
var vm=this
var length=vm . data . text . length * vm . data . size;//文本长度
var window width=wx . getsysteminfosync . window width;//屏幕宽度
vm.setdata({
长度:长度,windowwidth: windowwidth,marquee2_margin:长窗宽?window width-length : vm . data . marquee 2 _ margin//当文本长度小于屏幕长度时,需要添加填充
});
vm.run1//完成一横线文字后,按原方向滚动
vm.run2//第一个单词消失后立即从右边出现
},
run1:函数{
var vm=this
var interval=setinterval(函数{
if(-vm . data . marqueediinstance vm . data . length){
vm.setdata({
marqueedistance : vm . data . marqueedistance-vm . data . marqueepace,});
} else {
clearinterval(interval);
vm.setdata({
marqueedistance : vm . data . window width
});
vm.run1
}
},vm . data . interval);
},
run2:函数{
var vm=this
var interval=setinterval(函数{
if(-vm . data . marqueedistance 2 vm . data . length){
//如果文本滚动到marquee2_margin=30px的白边,则接下来显示
vm.setdata({
marqueedistance 2: vm . data . marqueedistance 2-vm . data . marqueepace,marquee 2 copy _ status : vm . data . length vm . data . marqueedistance 2=vm . data . window width vm . data . marquee 2 _ margin,});
} else {
if(-vm . data . marqueedistance 2;=vm.data.marquee2_margin) {//当第二个文本滚动到比较左边时,vm.setdata({
marquee distance 2: vm . data . marquee 2 _ margin//直接再次滚动
});
clearinterval(interval);
vm.run2
} else {
clearinterval(interval);
vm.setdata({
marqueedistance 2:-vm . data . window width
});
vm.run2
}
}
},vm . data . interval);
}
})
以上是小编为大家编写的关于如何设置微信小程序文本滚动的内容。更多精彩内容,请关注源社网小节目频道。
下面是如何解除小程序在标题开头的关联。标题到此结束
之前,小编介绍了将小程序与微信账号关联的方法。关联小程序是为了更好的利用小程序。但是如果要更改关联的微信账号,需要先解除小程序的关联。以下步骤是如何解除小程序的关联。
方法/步骤
1.登录关联微信账号后台
2.[添加小程序功能插件]-[授*管理]
3.单击[查看平台详细信息]-单击[取消授*]
4.这样就可以取消关联小程序的微信账号授*了!
这是第一段的结尾。下面是如何通过在末尾添加段来解除小程序的关联。目前已经获得了818网友的青睐!正文到此结束
上一篇:如何使用微信小程序工具条
下一篇:微信小程序有没有音乐
猜你喜欢
-
10个小程序文字技巧138人喜欢
微信小程序文字如何排版?如何设计一款好看的微信小程序?微信小程序如何设计的让人觉的好看呢?下面小编就来为大家讲解一下。如何开发设计一款好看的微信小程序呢?1.立意清晰清晰明确的告知用户,我是做什么的,我能如何帮助您解决问题。以最开始的用户需求定位为…
更新时间:2020-08-17 16:20:03
-
微信小程序文字滚动怎么设置89人喜欢
微信小程序的文字滚动怎么设置?微信小程序如何设置文字滚动效果?下面的小系列会带你看看如何设置微信小程序的文本滚动。页面结构一个接一个显示{{text}}2白边出现后显示{{text}}{{text}}页面样…
更新时间:2021-04-12 10:17:24
-
小程序文字居中怎么做81人喜欢
小程序文本怎么居中?如何让小程序词发挥作用?微信小程序文本可以设置在中间、右边或左边。你知道如何将小程序文本居中吗?接下来,小编介绍了如何实现小程序的文本居中。小程序文本怎么居中?…
更新时间:2021-03-15 07:23:51
-
小程序文字缩进怎么实现77人喜欢
如何实现小程序文本的缩进?大家应该都知道什么是缩进。当我们设置微信小程序时,如果小程序有缩进功能,我们可以更改脚本的格式。那么如何实现小程序的缩进呢?如何实现小程序文本的缩进?小程…
更新时间:2021-03-15 07:19:15
-
微信小程序文字空格怎么实现38人喜欢
微信小程序的文本空间怎么实现?在开发微信小程序的过程中,应该如何键入微信小程序的文本空间?下面是如何实现小编编译的微信小程序的文本空间。让我们跟随小编去寻找答案。微信小程序的文本空…
更新时间:2021-03-14 11:17:15
-
小程序文字超出换行怎么实现34人喜欢
如何实现小程序文字超过断行?根据微信小程序管理,你自己的微信小程序文本不能自动换行。那是因为你没有设置好。小编将向你介绍如何实现小程序文本如何超越包装。如何实现小程序文字超过断行?…
更新时间:2021-03-14 11:19:34
-
怎样更换微信小程序文字颜色33人喜欢
为了避免用户在使用小程序时出现视觉疲劳,小程序的开发也会尽可能的使小程序的页面多样化。以下是改变微信小程序文字颜色的具体教程。1.效果显示2.键码wxml文件js文件如果微信小程序的文本颜色…
更新时间:2021-04-16 10:16:40
-
微信小程序文字如何排版2人喜欢
微信小程序的文字怎么排版?如何设计一个好看的微信小程序?微信小程序是怎么设计出来让人感觉很好的?下面小系列给大家讲解一下。如何开发设计一个好看的微信小程序?1.清晰的概念明确告诉用户…
更新时间:2021-04-12 10:02:25