微信小程序开发教程：文字滚动的两种实现方式

在微信小程序的开发中，可以实现文字上下滚动或者跑马灯效果，主要有两种方式可以去开发实现，分别是使用textarea和text两种。下面我们说下这两种方式的设置要求以及在这两种方式基础上，以overflow： scroll实现滚动效果的代码示例。

1、控件设置注意事项

将控件放入View中，设置height值，且要注意不要写100%，不然效果无法呈现，而后再根据需求开始滚动设置即可。

2、控件配置如下：

<span style="font-size:14px;"><view selectable="true" scroll-y="true" >       

      <text<span style="color:#ff0000;"> <strong>class="th-text"</strong></span> disabled='true'  <span style="color:#ff0000;"><strong>style="overflow-y:auto;overflow-x:scroll;"</strong></span> selectable="true">{{item.text}}</text>  

 </view></span>  

3、class的th-text中的设置如下：

<span style="font-size:14px;">.th-text {  

  width: 100%;  

  justify-content: center;  

  color: #000;  

  display: block;  

 <strong><span style="color:#ff0000;"> height: 70rpx;</span></strong>  

  align-items: center;  

  max-height: 70rpx;  

}</span>

4、通过overflow：scroll实现滚动，实例代码展示

<!--pages/test/test.wxml-->

<!-- 组件 -->

<view>

  <view>a</view>

  <view>b</view>

  <view>c</view>

</view>

/* pages/test/test.wxss */

.flex-test{

  width: 400rpx;

  height: 400rpx;

  border: 1px solid red;

  overflow: scroll;

}

.flex-test view{

  width: 200rpx;

  height: 200rpx;

  font-size: 40rpx;

  color: white;

  text-align: center;

  line-height: 200rpx;

}

.a{

  background-color: green;

}

.b{

  background-color: red;

}

.c{

  background-color: blue;

}

5、实例运行效果展示