微信小程式把文字玩出花樣（彈幕）

小程式裡的彈幕類應用大部分只支援文字，而圖片和音訊這一功能是缺失的，本文會從產品角度來講訴如何打造一款支援表情的彈幕小程式。

實作效果

想法：

input 取得輸入文字，richtext顯示包含圖片的彈幕，設定richtext中文字的方向並且捲動起來，滑動改變文字大小，文字顏色等操作

實現代碼：

1.使用input輸入文字、支援emoji表情

先定義的一個"danmu "物件來保存input輸入的彈幕文字以及彈幕樣式、

danmu: {
      fontColor: "#ffffff",
      text: "默认弹幕~",
      fontSize: "40px",
      glow: "#ffff00",
      speed: '10s',
},

接著定義"nodes"物件顯示資料
text:彈幕文字；fontSize:文字大小；fontColor:文字顏色；glow ：文字發光；speed：滾動速度。

使用input元件輸入文字：

<input type=&#39;text&#39;
        bindconfirm=&#39;changeDanmuText&#39;
        value=&#39;{{danmu.text}}&#39; 
        placeholder=&#39;输入弹幕~&#39; 
        placeholder-style=&#39;color:#fff&#39; 
        cursor-spacing=&#39;28&#39;>
</input>

cursor-spacing設定input中遊標與鍵盤的距離

2.richText顯示包含圖片的彈幕

#定義nodes物件來更新彈幕

nodes: [{
    name: 'div',
    attrs: {
    class: 'danmu-text'},
    children: [
        {
        type: 'text',
        text: '彈幕文本

以上是微信小程式把文字玩出花樣（彈幕）的詳細內容。更多資訊請關注PHP中文網其他相關文章！