组件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 })