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

Posted 2021-01-10 落花之语

组件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代码

 1 .container {
 2    width: 100%;
 3    height: 100%;
 4    display: flex;
 5    flex-direction: column;
 6    justify-content: space-between;
 7    flex-wrap: nowrap;
 8    box-sizing: border-box;
 9    background: #f9db84;
10 }
11 
12 .scrolltxt {
13    padding: 0 10rpx;
14    box-shadow: 0px 0px 10rpx 2rpx red inset;
15 }
16 
17 .marquee_box {
18    position: relative; /*相对定位*/
19    color: #333;
20    height: 50rpx;
21    display: block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
22    overflow: hidden; /*溢出部分隐藏*/
23 }
24 
25 .marquee_text {
26    white-space: nowrap; /*    文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
27    position: absolute; /*绝对定位*/
28    height: 50rpx;
29    color: #6b5924;
30    top: 0;
31    font-size: 24rpx;
32    font-weight: 700; /*字体加粗*/
33    letter-spacing: 2rpx; /*字体间隔*/
34    line-height: 50rpx; /*行高*/
35 }

 

组件js代码

 1 // com/gonggao/gonggao.js
 2 Component({
 3    /**
 4     * 组件的属性列表
 5     */
 6    properties: {
 7       text: String,
 8    },
 9 
10    /**
11     * 组件的初始数据
12     */
13    data: {
14       marqueePace: 1,//滚动速度
15       marqueeDistance: 0,//初始滚动距离
16       marquee_margin: 30,
17       size: 14,
18       interval: 25 // 时间间隔
19    },
20 
21    attached: function() {
22       var that = this;
23       var length = that.data.text.length * that.data.size;//文字长度
24       var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
25       that.setData({
26          length: length,
27          windowWidth: windowWidth
28       });
29       that.scrolltxt();// 第一个字消失后立即从右边出现
30    },
31    /**
32     * 组件的方法列表
33     */
34    methods: {
35       scrolltxt: function () {
36          var that = this;
37          var length = that.data.length;//滚动文字的宽度
38          var windowWidth = that.data.windowWidth;//屏幕宽度
39          if (length > windowWidth) {
40             var interval = setInterval(function () {
41                var maxscrollwidth = length + that.data.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
42                var crentleft = that.data.marqueeDistance;
43                if (crentleft < maxscrollwidth) {//判断是否滚动到最大宽度
44                   that.setData({
45                      marqueeDistance: crentleft + that.data.marqueePace
46                   })
47                }
48                else {
49                   //  console.log("替换");
50                   that.setData({
51                      marqueeDistance: 0 // 直接重新滚动
52                   });
53                   clearInterval(interval);
54                   that.scrolltxt();
55                }
56             }, that.data.interval);
57          }
58          else {
59             that.setData({ marquee_margin: "1000" });//只显示一条不滚动右边间距加大，防止重复显示
60          }
61       }
62    }
63 })

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

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

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

 

引用页面的json代码：

1 {
2    "usingComponents": {
3       "gonggao":"/com/gonggao/gonggao"
4    }
5 }

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

 

引用页面的wxml代码:

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

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

 

引用页面的js代码：

 1 Page({
 2    /**
 3     * 页面的初始数据
 4     */
 5    data: {
 6       content: "这是一条测试数据 这是一条测试数据 这是一条测试数据 这是一条测试数据"
 7    },
 8 
 9    /**
10     * 生命周期函数--监听页面加载
11     */
12    onLoad: function (options) {
13 
14    }
15 
16 })