一、功能实现

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

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

二、部分代码

手持滚动弹幕

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);
  }
})
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐