微信小程序:小秋工具箱开发

小秋工具箱集成了多项实用功能,包括首页轮播、垃圾分类查询等。本文重点介绍了手持滚动弹幕功能的实现原理及核心代码,该功能允许用户自定义弹幕内容和属性,使手机变身成为手持弹幕设备。

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

一、功能实现

小秋工具箱已实现以下功能:首页轮播、垃圾分类查询 、手持滚动弹幕、生成教你百度网址、短网址生成、二维码生成、测量刻度尺。

垃圾分类查询
通过输入垃圾名称查询垃圾的分类
在这里插入图片描述
手持滚动弹幕
输入弹幕内容并设置弹幕属性后,即可让手机变为手持弹幕
在这里插入图片描述
生成教你百度网址
输入要百度的问题后可以生成一个帮别人百度的网址
在这里插入图片描述
短网址生成
可将长网址转换为短网址
在这里插入图片描述
二维码生成
将文本或是网址转换为二维码
在这里插入图片描述

二、部分代码

手持滚动弹幕

Page({
  /**
   * 页面的初始数据
   */
  data: {
    numbj: '#000',
    numwz: '#fff',
    gd:0,
    kd:0,
    lb:0,
    text: "",
    marqueePace:2,
    textLeftAnimation:{},
    scsd:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // //获取传递参数
    // var sd = Number(options.numsd)*2;
    var texts = options.text;
    if (texts == "" || texts==undefined){
      texts="你为什么不输弹幕内容"
    }
    var that=this;
    that.setData({
      text: texts,
      numbj: options.numbj,
      numwz: options.numbj,
      marqueePace: options.numsd,
      nmwzcs: options.numwz
    });
    wx.setNavigationBarColor({
      frontColor: options.numbj,
      backgroundColor: options.numbj
    });
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //创建节点选择器
    var query = wx.createSelectorQuery();
    //选择id
    var that = this;
    var lengtsh = 0;
    query.select('.ss').boundingClientRect(function (rect) {
      that.setData({
        gd: rect.height,
        kd: rect.width,
        lb: (rect.height - rect.width)/2
      })
    }).exec();
    query.select('.wenzi').boundingClientRect(function (rect) {
      that.setData({
        length: rect.height
      });  
      lengtsh = rect.height;
      var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
      var heights = wx.getSystemInfoSync().windowHeight;// 屏幕宽度
      lengtsh = heights;
      var marqueePace = that.data.marqueePace;
      var scsd = (lengtsh * 20) / marqueePace;
      var wzys = that.data.nmwzcs;
      that.setData({ 
        windowWidth: windowWidth,
        marqueeDistance: -(lengtsh),
        cunchucd: -(lengtsh),
        numwz: wzys,
        scsd: scsd
      }); 
      setTimeout(function () {
       that.scrolltxt();// 开始滚动
      }, 200);
    }).exec();
  }, 
  scrolltxt: function () { 
    var that = this;
    var length = that.data.length;//滚动文字的宽度
    var windowWidth = that.data.windowWidth;//屏幕宽度
    var guadu = that.data.gd;
    var gdkda = length;
    if (length > windowWidth) {
      gdkda = length;
    } else {
      gdkda = guadu;
    }
    var maxscrollwidth = that.data.cunchucd;
    var shudu = that.data.scsd;
    console.log(shudu);
    let animationLeft = wx.createAnimation({
      duration: shudu,
      timingFunction: 'linear'
    })
    animationLeft.right(gdkda).step()
    that.setData({
      textLeftAnimation: animationLeft.export()
    });
    setInterval(function () {
      let animationLeft = wx.createAnimation({
        duration:0,
        timingFunction: 'linear'
      })
      animationLeft.right(-guadu).step()
      that.setData({
        textLeftAnimation: animationLeft.export()
      }); 
      setTimeout(function(){
        let animationLeft = wx.createAnimation({
          duration: shudu,
          timingFunction: 'linear'
        })
        animationLeft.right(gdkda).step()
        that.setData({
          textLeftAnimation: animationLeft.export()
        });
      },100);
    }, shudu+100);
  }
})
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值