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

2018/6/13 16:40:19
摘要: 在微信小程序的开发中,可以实现文字上下滚动或者跑马灯效果,主要有两种方式可以去开发实现,分别是使用textarea和text两种

在微信小程序的开发中,可以实现文字上下滚动或者跑马灯效果,主要有两种方式可以去开发实现,分别是使用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、实例运行效果展示

微信小程序开发 


声明:文章"微信小程序开发教程:文字滚动的两种实现方式"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序开发难不难,广州互诚科技告诉你

    在百度网页上,很多人在询问微信小程序开发难不难,小编也一样用这样的文字去搜寻答案

  • 开发企业微信2。0,融合企业号统一管理再出发

    现在的微信开发市场常见的是公众号开发、小程序开发以及一些商城开发,而这些都是关于自媒体或者企业经营的产品开发,极少有关于企业管理的产品开发出现。

  • 微信小程序能给用户带来什么使用价值及意义?

    用户之所以使用微信小程序,很大程度都是因为小程序能给用户带来方便,让生活通过小程序而更加便捷。所以,小程序之于用户来说的使用价值与意义,我们可以从它带来的便利性

  • 小程序开发市场为什么由冷变热?

    据统计,在微信小程序的开发市场上看,六月份开始光广州地区的开发公司就已经增至上千家,而推动开发公司增加的要点就是开发市场需求的增加。说到这里,有人就会疑惑,明明小程序之前的开发市场是比较冷淡的,为什么小编现在会在这里把它的市场说得如此火热?所以作为一个负责任的小编,有必要来说一下小程序的开发市场为什么由冷变热?

  • 微信小程序技术教程之用户授权登陆开发

    微信用户授权登陆的时候,用来记录用户身份唯一性的标识就是微信中的unionID,所以在做授权登陆开发的时候,如何拿到

  • 微信小程序开发技术教程:视图容器组件详解(一)

    微信小程序开发的时候,需要设计一个视图容器组件的问题,它有多种视图样式,每一种都有需要注意的内容。所以

好彩客官网 多盈彩票 189彩票官网 128彩票官网 128彩票充值 106彩票官网 凤凰彩票 198彩票官网 139彩票充值 189彩票充值中心