微信小程序跑马灯

一、创建一个小程序项目

（使用的是微信开发者工具创建的项目）

效果图：（文字可以循环，展现跑马灯效果）

目录结构

pages：存放的是页面代码

pages里面一个文件夹就是一个页面

一个文件夹里有四个子文件：

wxml：编写小程序页面结构的文件

wxss：编写小程序样式的文件

json：编写页面配置的文件

js：编写页面逻辑的文件

utils:编写工具类的文件

app.js:编写全局配置的文件

app.wxss:编写全局样式的文件

project.config.json:项目的配置文件

sitemap.json:配置哪些网站可以被检索到

二、渲染到页面上静态内容

1、首先在data中定义一句话（书写在.js文件中）

  data: {
    msg:'猥琐发育,别浪!!!',

  },

2、渲染在页面上（书写在wxhl文件中）

<view class="textBox">{{msg}}</view>
<button bind:tap='start'>开始</button><button bind:tap='stop'>暂停</button>

3、在.js中编写单击事件

start(){
  clearInterval(this.data.timer)      //单击开始按钮清除上一次计时器，防止计时器重复叠加
  this.data.timer = setInterval(()=>{ //计时器没300毫秒执行一次
    let start = this.data.msg[0]      //剪切第一个文字
    let end = this.data.msg.slice(1)  //索引1往后的剩余文字
    this.setData({msg:end + start})   //使用setData方法，将更改后的字符串渲染在页面上
  },300)
},
stop(){
 clearInterval(this.data.timer)       //单击停止按钮清除计时器
},