美文网首页
实现一个微信小程序组件:文字跑马灯效果

实现一个微信小程序组件:文字跑马灯效果

作者: solfKwolf | 来源:发表于2018-09-21 00:26 被阅读594次

    项目未动,组件先行

    废话不多说,直接上代码

    • marquee.json
    {
      "component": true,
      "usingComponents": {}
    }
    
    • marquee.wxml
    <!--components/marquee.wxml-->
    <view class='marquee_container'>
      <view class='marquee_text' style='{{ orientation }}:{{ marqueeDistance }}px;font-size: {{size}}px;'>
        {{ text }}
      </view>
    </view>
    
    
    • marquee.wxss
    /* components/marquee.wxss */
    .marquee_container {
      position: relative;  
      width: 100%;
    }
    
    .marquee_text {
      position: absolute;
      white-space: nowrap;
      top: 0;
    }
    
    • marquee
    // components/marquee.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        text: {
          type: String,
          value: 'ILoveEwei'
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        marqueePace: 1,
        marqueeDistance: 0,
        size: 14,
        orientation: 'left',
        interval: 20
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        _scrolling: function() {
          var _this = this;
          var timer = setInterval(()=> {
            if(-_this.data.marqueeDistance < _this.data.length) {
              _this.setData({
                marqueeDistance: _this.data.marqueeDistance - _this.data.marqueePace
              })
            } else {
              clearInterval(timer);
              _this.setData({
                marqueeDistance: _this.data.windowWidth
              });
              _this._scrolling();
            }
          },_this.data.interval);
        }
      },
    
      created: function() {
        var _this = this;
        var length = _this.data.text.length * _this.data.size;
        var windowWidth = wx.getSystemInfoSync().windowWidth
        _this.setData({
          length: length,
          windowWidth: windowWidth
        });
        _this._scrolling();
      }
    })
    
    

    以上就是我定义在components文件夹的组件,剩下就是引用组件

    • demo.json
    {
      "usingComponents": {
        "marquee": "../../components/marquee"
      }
    }
    
    • demo.wxml
    <marquee text="我爱你我爱你我爱你"></marquee>  
    

    就这样可以了

    参考资料

    相关文章

      网友评论

          本文标题:实现一个微信小程序组件:文字跑马灯效果

          本文链接:https://www.haomeiwen.com/subject/rvvonftx.html