微信小程序滚动字幕

最新推荐文章于 2025-05-09 10:14:49 发布

原创最新推荐文章于 2025-05-09 10:14:49 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

前端专栏收录该内容

62 篇文章

订阅专栏

本文展示了如何在微信小程序中创建一个动态滚动文本的效果，并结合表单进行用户输入验证。通过修改样式属性实现文本滚动，同时设置不同颜色、字体大小和速度。在表单提交时，检查内容、速度、字体大小和颜色是否为空，确保数据完整性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先演示
在这里插入图片描述

上代码
index.wxml

<view class="background-view">
    <!-- 需要使用 button 来授权登录 -->
    <view style="left:{{marginLeft}}px; color:{{color}}; font-size:{{fontSize}}px" class="text">{{content}}</view>
    <view class="page-body" style="visibility:{{hidden}}">
    <form catchsubmit="formSubmit" catchreset="formReset">


      <view class="page-section page-section-gap">
        <radio-group name="color">
          <label style="color:red"><radio value="red"/>红</label>
          <label style="color:white"><radio value="white"/>白</label>
        </radio-group>
      </view>

      <view class="page-section" style="color:white">
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input type="text" class="weui-input" name="content" placeholder="内容" />
              <input type="number" class="weui-input" name="fontSize" placeholder="字体大小" />
              <input type="number" class="weui-input" name="speed" placeholder="显示速度" />
            </view>
          </view>
        </view>
      </view>

      <view class="btn-area">
        <button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
        <button style="margin: 30rpx 0" formType="reset">Reset</button>
      </view>
    </form>
  </view>

  <view class="text">本软件已申请知识产权保护，请选择正规购买渠道，否则一经发现我们将追究法律责任。
#版本区别一览表：</view>
</view>

index.json

{
  "navigationStyle": "custom"
}

index.js

// canvas.js
var helloData = {
  name: 'Weixin',
  systemInfo:{},
  windowInfo:{},
  widthP: 100,
  heightP: 100,
  leftFlag: false,
  speed: 60,
  marginLeft:-100,
  color: "#ff6f10", //按钮颜色
  disabled: false, //是否可以点击
  getCode: "开始滚动", //显示文字
  hidden:'',
  text:'',
}

Page({

  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  },

  onReady() {

    wx.getSystemInfo({
      success: (result) => {
        console.log(result)
        this.setData({systemInfo:result,marginLeft:result.windowWidth})
      },
    }),

    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#000000'
    })

  //   wx.setBackgroundColor({
  //     backgroundColor: '#000000',
  //   })

  //   const query = wx.createSelectorQuery()
  //   query.select('#myCanvas')
  //     .fields({ node: true, size: true })
  //     .exec((res) => {
  //       const canvas = res[0].node
  //       const ctx = canvas.getContext('2d')

  //       const dpr = wx.getSystemInfoSync().pixelRatio
  //       canvas.width = res[0].width * dpr
  //       canvas.height = res[0].height * dpr
  //       ctx.scale(dpr, dpr)
  //       ctx.fillRect(0, 0, 100, 100)
  //       ctx.fillStyle = "red"
  //       ctx.fontSize = 48
  //       ctx.fillText('hello world',100,100)
  //     })
  // }

  },
  sendCode: function(e) {
    var that = this;
    var times = 0
    var i = setInterval(function() {
         times++
         if (times >= 99999999) {
              that.setData({
                   color: "#ff6f10",
                   disabled: false,
                   getCode: "开始滚动",
              })
              clearInterval(i)
         } else {
           console.log(times)
           if(times>80){
             times=-20
           }
              that.setData({
                   getCode: "重新获取" + times + "s",
                   marginLeft:times*5,
                   disabled: true,
              })
         }
    }, 100)
}
,
formSubmit(e) {
  console.log('form发生了submit事件，携带数据为：', e.detail.value);
  const settingInfo = e.detail.value;
  if(settingInfo.content===""){
    wx.showToast({
      icon:'error',
      title: '内容必填',
    })
    return;
  }
  if(settingInfo.speed===""){
    wx.showToast({
      icon:'error',
      title: '速度必填',
    })
    return; 
  }
  settingInfo.fontSize=Number(settingInfo.fontSize);
  if(settingInfo.fontSize===""){
    wx.showToast({
      icon:'error',
      title: '字体大小必填',
    })
    return;
  }
  if(settingInfo.color===""){
    wx.showToast({
      icon:'error',
      title: '字体颜色必填',
    })
    return;
  }

  this.setData({
    color: settingInfo.color,
    speed: Number(settingInfo.speed),
    content:settingInfo.content,
    fontSize:Number(settingInfo.fontSize),
    hidden:'hidden'
  })

  console.log(this.data)

  var that = this;
  var times = 0
  const speed = this.data.speed
  const windowWidth = this.data.systemInfo.windowWidth
  var marginLeft = windowWidth
  const textLength = this.data.content.length
  const fontSize = this.data.fontSize
  var i = setInterval(function() {
       times++
       marginLeft-=speed
       if (times >= 99999999) {
            that.setData({
                 color: "#ff6f10",
                 disabled: false,
                 getCode: "开始滚动",
            })
            clearInterval(i)
       } else {
         console.log('times:',times,'marginLeft',marginLeft)
         console.log(fontSize*textLength)
         if(marginLeft<-textLength*fontSize){
          marginLeft=windowWidth
         }
          that.setData({
                getCode: "重新获取" + times + "s",
                marginLeft:marginLeft,
          })
       }
  }, 50)
},

})

index.wxss

page{
  height:100%
}
 
.background-view{
  position: relative;
  background-color: #000000;
  height: 100%;
}

.text{
  position: relative;
  margin-top: 200px;
  white-space: nowrap;	/*规定文本不进行换行*/
}