手持彈幕（全屏文字滾動）效果測試（如圖）

可以搜下小程序;滾屏神器

奉上小程序代碼：

????wxml：

<!--pages/02-23/demo1/newDanMu.wxml--> <view class="textBox" style="background-color:{{backgroundColor}}"><view class='text' style="font-size: {{fontSize}}rpx; animation: animateText {{animateTime}}s infinite linear; color:{{fontColor}}"> {{text}} </view> </view> <view class="inputBox"><input class="inp" placeholder="請輸入彈幕~" bindinput="inputBlur" cursor-spacing='10'></input><view bindtap="sendBtn" class="iconfont icon-1huojian iconBtn1"> 發送</view><view bindtap="showModal" class="iconfont icon-qita3 iconBtn1">屬性</view> </view> <!--屏幕背景變暗的背景 --> <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <!-- 屏幕內容 --> <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"><view class="swiper-tab swiperAttr"><view class="iconfont icon-jurassic_font-sizeadd swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">字號</view><view class="iconfont icon-yanse1 swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">顏色</view><view class="iconfont icon-Group- swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">速度</view><view class="iconfont icon-beijingse swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">背景</view> </view> <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"><!-- 字體大小 --><swiper-item><view class="swiperItem1"><slider show-value value='{{sliderValOfFontSize}}' bindchanging='changeFontSize' selected-color='#006AFE'></slider></view></swiper-item><!-- 選擇顏色 --><swiper-item><view class="swiperItem2"><view class="colorBox" bindtap="setColor"><view class="colorItems" wx:for='{{colorArr}}' data-index="{{index}}" style="background-color:{{item.color}}" wx:key=''></view></view></view></swiper-item><!-- 字體速度 --><swiper-item><view class="swiperItem1"><slider show-value bindchanging='changeTextSpeend' selected-color='#006AFE' value='{{sliderValOfAnimateTime}}'></slider></view></swiper-item><!-- 背景顏色 --><swiper-item><view class="swiperItem2"><view class="colorBox" bindtap="setBackGroundColor"><view class="colorItems" wx:for='{{colorArr}}' data-index="{{index}}" style="background-color:{{item.color}}" wx:key=''></view></view></view></swiper-item> </swiper> </view>

????js：

// pages/02-23/demo1/newDanMu.js Page({/*** Page initial data*/data: {inputText: '',text: '請輸入彈幕( = _ = )||',sliderValOfFontSize:50,fontSize: 300,fontColor:'white',backgroundColor:'black',animateTime:10,sliderValOfAnimateTime:50,currentTab: 0,textMoveAnimate:null,colorArr:[{ color: 'pink' },{ color: "red" },{ color: "blue" },{ color: "yellow" },{ color: "white" },{ color: "aqua" },{ color: "green" },{ color: "skyblue" },{ color: "hotpink" },{ color: "black" }]},//改變背景顏色setBackGroundColor(e){console.log(e.target.dataset.index);let index = e.target.dataset.index;let that = this;let selectColor = that.data.colorArr[index].color;that.setData({backgroundColor: selectColor})},// 選擇彈幕的字體顏色setColor(e){// console.log(e.target.dataset.index);let index = e.target.dataset.index;let that = this;let selectColor = that.data.colorArr[index].color;that.setData({fontColor:selectColor})},//改變彈幕滾動速度changeTextSpeend(e){console.log(e.detail.value);let sliderVal = e.detail.value;let that = this;//50 默認 10s//0 是 15s//100 是 5sthat.setData({animateTime: sliderVal * -0.1 + 15,sliderValOfAnimateTime: sliderVal})},// 改變字號changeFontSize(e){//獲取滑竿的值console.log(e.detail.value);let sliderVal = e.detail.value;let that = this;//運算邊界值//50 對應 300rpx 的字號//0 對應 150rpx//100 對應 450rpxthat.setData({fontSize: sliderVal * 3 + 150,sliderValOfFontSize: sliderVal})},// input失去焦點時獲取輸入的文字inputBlur(e) {let that = this;let inputVal = e.detail.value;// console.log(inputVal);that.setData({inputText: inputVal})},sendBtn() {let that = this;if (that.data.inputText == '') {wx: wx.showToast({title: '不能為空哦',duration: 2000})}else {that.setData({text: that.data.inputText})}},//顯示對話框showModal: function () {// 顯示遮罩層var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),showModalStatus: true})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export()})}.bind(this), 200)},//隱藏對話框hideModal: function () {// 隱藏遮罩層var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export(),showModalStatus: false})}.bind(this), 200)},/*** Lifecycle function--Called when page load*/onLoad: function (options) {},//滑動切換swiperTab: function (e) {var that = this;// console.log(e.detail.current);that.setData({currentTab: e.detail.current});},//點擊切換clickTab: function (e) {var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current})}},/*** Lifecycle function--Called when page is initially rendered*/onReady: function () {},/*** Lifecycle function--Called when page show*/onShow: function () {},/*** Lifecycle function--Called when page hide*/onHide: function () {},/*** Lifecycle function--Called when page unload*/onUnload: function () {},/*** Page event handler function--Called when user drop down*/onPullDownRefresh: function () {},/*** Called when page reach bottom*/onReachBottom: function () {},/*** Called when user click on the top right corner to share*/onShareAppMessage: function () {} })

??css:

/* pages/02-23/demo1/newDanMu.wxss */ @import '../css/iconfont.wxss'; page{margin: 0;padding: 0; } .textBox{height: 100vh;display: flex;justify-content: center;background-color: black;position: relative; } .text{transform:rotate(90deg);height: 1rpx;display: flex;align-items: center;white-space: nowrap;/* background-color: salmon; */position: fixed;top: 280%;color: white;/* margin-top: -1%; */} @keyframes animateText{0%{margin-top: 0%;}100%{margin-top: -700%;} } .inputBox{position: fixed;bottom: 1%;display: flex;/* background-color: saddlebrown; */} .inp{border: 1px #333333 solid;border-radius: 50rpx;margin-left: 30rpx;padding-left: 20rpx;color: white;font-size: 30rpx;width: 390rpx;height: 63rpx; } .iconBtn1{/* border: 1px white solid; */width: 130rpx;height: 70rpx;border-radius: 60rpx;display: flex;justify-content: center;align-items: center;font-size: 30rpx;font-weight: bold;background-color: #333333;color: white;margin-left: 10rpx;} .swiperItem1{padding-top: 15%;padding-left: 5%; } .swiperItem2{padding-top: 15%; } /* 色塊 */ .colorBox{display: flex;justify-content: space-evenly; } .colorItems{width: 50rpx;height: 50rpx; } /* .color1{background-color: pink; } .color2{background-color: red; } .color3{background-color: blue; } .color4{background-color: yellow; } .color5{background-color: white; } .color6{background-color: aqua; } .color7{background-color: green; } .color8{background-color: skyblue; } .color9{background-color: hotpink; } .color10{background-color: black; } */ /* 彈起框的樣式 */ /*使屏幕變暗 */ .commodity_screen {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.8;overflow: hidden;z-index: 1000;color: #fff; } /*對話框 */ .commodity_attr_box {height: 430rpx;width: 100%;overflow: hidden;position: fixed;bottom: 0;left: 0;z-index: 2000;background: #282828;border-radius: 10rpx 10rpx 0 0; } /* swiper start */ .swiper-tab{width: 100%;border-bottom: 2rpx solid #373737;text-align: center;height: 88rpx;line-height: 88rpx;font-weight: bold;background-color: #282828; } .swiper-tab-item{display: inline-block;width: 25%;color:#939393; background-color: #282828; } .active{background-color: #006AFE;color:white;border-bottom: 4rpx solid#373737; } swiper{color: white;background-color: #282828; } /* swiper end */

json:

{"usingComponents": {},"navigationStyle": "custom","navigationBarTextStyle": "white" }

?

總結

以上是生活随笔為你收集整理的手持弹幕（全屏文字滚动）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。