小程序自定义组件的制作的使用（文字流动效果示例）

组件wxml代码

<scroll-view class="container">
   <view class="scrolltxt">
      <view class="marquee_box">
         <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
            <text>{{text}}</text>
            <text style="margin-right:{{marquee_margin}}px;"></text>
            <text style="margin-right:{{marquee_margin}}px;">{{text}}</text>
         </view>
      </view>
   </view>
</scroll-view>

组件wxss代码

.container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex-wrap: nowrap;
   box-sizing: border-box;
   background: #f9db84;
}

.scrolltxt {
   padding: 0 10rpx;
   box-shadow: 0px 0px 10rpx 2rpx red inset;
}

.marquee_box {
   position: relative; /*相对定位*/
   color: #333;
   height: 50rpx;
   display: block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
   overflow: hidden; /*溢出部分隐藏*/
}

.marquee_text {
   white-space: nowrap; /*    文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
   position: absolute; /*绝对定位*/
   height: 50rpx;
   color: #6b5924;
   top: 0;
   font-size: 24rpx;
   font-weight: 700; /*字体加粗*/
   letter-spacing: 2rpx; /*字体间隔*/
   line-height: 50rpx; /*行高*/
}

 

组件js代码

// com/gonggao/gonggao.js
Component({
   /**
    * 组件的属性列表
    */
   properties: {
      text: String,
   },

   /**
    * 组件的初始数据
    */
   data: {
      marqueePace: 1,//滚动速度
      marqueeDistance: 0,//初始滚动距离
      marquee_margin: 30,
      size: 14,
      interval: 25 // 时间间隔
   },

   attached: function() {
      var that = this;
      var length = that.data.text.length * that.data.size;//文字长度
      var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
      that.setData({
         length: length,
         windowWidth: windowWidth
      });
      that.scrolltxt();// 第一个字消失后立即从右边出现
   },
   /**
    * 组件的方法列表
    */
   methods: {
      scrolltxt: function () {
         var that = this;
         var length = that.data.length;//滚动文字的宽度
         var windowWidth = that.data.windowWidth;//屏幕宽度
         if (length > windowWidth) {
            var interval = setInterval(function () {
               var maxscrollwidth = length + that.data.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
               var crentleft = that.data.marqueeDistance;
               if (crentleft < maxscrollwidth) {//判断是否滚动到最大宽度
                  that.setData({
                     marqueeDistance: crentleft + that.data.marqueePace
                  })
               }
               else {
                  //  console.log("替换");
                  that.setData({
                     marqueeDistance: 0 // 直接重新滚动
                  });
                  clearInterval(interval);
                  that.scrolltxt();
               }
            }, that.data.interval);
         }
         else {
            that.setData({ marquee_margin: "1000" });//只显示一条不滚动右边间距加大，防止重复显示
         }
      }
   }
})

系统创建JS的时候是没有attached的，可以自行创建，把直接需要运行的js代码写进去 ；

而properties和data在运行的时候是合并起来的，不管是用this.data.xxx或者this.properties.xxx都能调用，但是往js里面传值的就要把要传的值提前在properties里面定义类型，无需改变的值可以写在data里面；

自定义的方法要写在methods里面

 

引用页面的json代码：

{
   "usingComponents": {
      "gonggao":"/com/gonggao/gonggao"
   }
}

这里注意usingComponents里面的格式是"key":"路径"，KEY是定义的组件名，路径建议是绝对路径

 

引用页面的wxml代码:

<gonggao text="{{content}}"/>

这里面的text这个名称要和组件js里面 properties: {text: String,}这个名称做对照  gonggao标签就是在json里面定义的组件名 

 

引用页面的js代码：

Page({
   /**
    * 页面的初始数据
    */
   data: {
      content: "这是一条测试数据 这是一条测试数据 这是一条测试数据 这是一条测试数据"
   },

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {

   }

})