微信小程序滚动文字怎么实现
页面结构代码如下
autoplay= { { autoplay } } interval= { { interval } } duration= { { duration } } ;
弹幕
发射
{{item。弹幕_ shoottext } }
页面样式表代码如下
/* pages/index/index.wxss */。幻灯片图像{
宽度 100%;
}
/* 弹幕选择按钮的操作*/。弹幕开关{
绝对位置
bottom: 10px
right: 10px
z-index : 2;
}
/* pages/index/index.wxss */。幻灯片图像{
宽度 100%;
}
/* 弹幕选择按钮的操作*/。弹幕开关{
绝对位置
bottom: 10px
right: 10px
z-index : 2;
}
/* 弹幕输入框的操作*/。弹幕-输入文本{
绝对位置
显示 flex
背景-color : # bfbfbf;
宽度 100%;
高度 40px
挠曲方向行;
nav-index : 2;
正义-内容中心;
对齐-项目居中;
底部 10%;
}。弹幕-输入{
背景颜色绿黄色;
宽度 60%;
高度 30px
}。弹幕射击
左边距 10px
宽度 25%;
高度 30px
}。拍摄{
宽度 100%;
颜色黑色;
}
/*弹幕飞飞飞*/。弹幕飞行
z-index : 3;
高度 80%;
宽度 100%;
绝对位置
top : 0;
}。弹幕-textfly{
绝对位置
}
这样基本的样式就都实现了。接下来要对弹幕上的字进行处理。
文字是从右往左移动,文字出现的位置顶端是随机,左侧则是取屏幕的宽度。移动的时候是用定时器进行处理。
还有就是字体的颜色是随机出现的。这些功能都是利用射流研究…处理的。
射流研究…的代码如下
var barak _ style _ arr=;
var弹幕_ style _ obj={ };
var电话宽度=0;
var timers=;
var计时器;
页面({
数据 {
imgurls:
http://img 02。太开放了。com/images/2021 09 28/tooopen _ sy _ 143912755726。jpg ,http://img 06。太开放了。com/images/2021 08 18/tooopen _ sy _ 175866434296。jpg ,http://img 06。太开放了。com/images/2021 08 18/tooopen _ sy _ 175833047715。jpg
,
指示为真,autoplay: true,interval: 3000,工期 500,
barragetextcolor:#d3d3d3 ,barrage _ inputtext: none ,弹幕_射击文本颜色 黑色,bind _ shootvalue: ,弹幕_style:,barragefly_display:none ,},
//生命周期函数-监听页面加载
onload:function(选项){
那=这个
//获取屏幕的宽度
wx.getsysteminfo({
成功功能(res) {
that.setdata({
barra _ phone width : res . window width-100,})
}
})
phonewidth=that.data。弹幕phone width(_ w)
控制台。log(电话宽度);
},
//是否打开弹幕.
barrageswitch:功能(e){
控制台。log(e);
//先判断没有打开
if(!e.detail.value){
//清空弹幕
弹幕_ style _ arr=;
//设置数据的值
this.setdata({
barragetextcolor:#d3d3d3 ,barrage _ inputtext: none ,barragefly_display:none ,弹幕_样式弹幕_样式_arr,});
//清除定时器
clearinterval(计时器);
}else{
this.setdata({
barragetextcolor:#04be02 ,barrage _ inputtext: flex ,barragefly_display:block ,});
//打开定时器
定时器=设置时间间隔(这。barragetext _ move,800)
}
},
//发射按钮
枪击功能(e){
//字体颜色随机
var text color= rgb( parseint(math . random * 256), parse int(math。random * 256), parse int(数学。random * 256));
////设置弹幕字体的水平位置样式
//var text width=-(此。数据。bind _ short值。长度* 0);
//设置弹幕字体的垂直位置样式
var barrier text _ height=(数学。random)* 266;
barrier _ style _ obj=& gt
//文本宽度3330文本宽度,删除线_高度删除线文本高度,barrier _ shoot text :这。数据。bind _ shoot值,barrier _ shoot文本颜色3330文本颜色,挡墙_phonewidth:phonewidth
}:
_ style _ arr(删除样式_obj):
这个。setdata()
barrier _ style 3330 barrier _ style _ arr,//唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟
bind _ shoot值3330 //朱庇特朱庇特
})
//是阿忠杏春小姐
//这个。timer=setinterval(this。barrett text _ move,800);
},
//是阿忠杏春小姐
barragetext _ move :函数
var timer num=barrier _ style _ arr。长度
var textmove
s7-1200可编程控制器i p=;
文本移动.phonewidth水坝
控制台。日志( barrier _ style _ arr i .barrier _ phone width-: barrier _ style _ arri.phonewidth水坝
text move=text move-20;
barrier _ style _ arri.弹幕_ phonewidth=文字移动
//元云
if(text move=-100){ }
//清除超时(此。计时器);
拼接_样式_ arr _ bar(0.1):
我-;
//鲁仲尼鲁仲尼鲁仲尼
if(barrier _ style _ arr。长度==0)}
这个。setdata()
删除线3330删除线,})
//清除间隔(此。计时器);
返回;
}
}
console.log(什么事"我"云娥3360,文本移动
这个。setdata()
删除线3330删除线,})
}
},
//我的天啊!我的天啊!我的天啊!我的天啊!我的天啊!我的天啊!我的天啊!我的天啊!我的天啊!我的天啊!我的天啊!我的天啊!我的天啊,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲,吴亚玲日期-什么事bind _ shootvalue,吴亚玲吴亚玲
绑定_拍摄函数
这个。setdata()
bind _ short value : e . detail . value
})
},
})
因为刚接触小程序,对一些语句的用法不太了解。所以我遇到了一些问题
1.获取js中wxml的控制信息。
js:
barrageswitch:功能(e){
console . log(e);
}
以上是如何在微信小程序中实现滚动文本。实现微信小程序滚动文本代码的全部内容。看完就知道怎么实现微信小程序滚动文本了。如果想了解更多的微信小程序内容,可以在源代理网络小程序频道找到。
这是题目的开头。什么是微信小程序联盟?标题到此结束
什么是微信小程序联盟?微信小程序成了讨论的热点。很多微信官方账号都开发了自己的微信小程序。最近有人问微信小程序联盟是什么?今天我给你介绍一下!
微信小程序联盟是开发微信小程序的技术论坛,提供官方文档、基础开发知识、优秀教程、微信小程序插件、演示集等资源,帮助开发者快速开发自己的微信小程序,也可以在这里讨论开发中的那些东西。
微信小程序联盟会介绍微信小程序的很多常见问题
和微信小程序联盟一样的网站也有micro joe,也是帮助开发小程序的资源。
什么是微信小程序联盟?大家应该都知道吧!更多小程序代码和小程序信息,请关注源代理网的小程序通道。
上一篇:微信小程序自定义弹窗怎么做
下一篇:返回列表
郑重声明:
本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,
仅供大家参考、学习,不存在任何商业目的与商业用途。
若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
我们不承担任何技术及版权问题,且不对任何资源负法律责任。
如无法链接失效或侵犯版权,请给我们来信:1849626408@qq.com
下一篇 微信小程序数据库交互怎么实现..
评论 |
|