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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 广州微信小程序开发骗局:模板开发骗局泛滥

    在广州微信小程序的开发上,不是每一个企业都是真正有需求要涉及小程序开发的

  • 企业进行微信小程序开发,一定要考虑的那些方面

    企业在微信小程序开发之前以及过程之中,除了要考虑如何去满足企业本身的需求之外,还要考虑最终的成果是否能满足用户的体验需求,只有将这两个方面充分考虑到并且有充足的准备,才能在后续上线时能有较好的发展。而这两个方面又可以延伸出

  • 开发一个购物类小程序需要哪些必备功能

    现在的微信平台,不仅仅有微信分销商城、微商城这类电商产品,连最近开发程度火热的微信小程序也有了相应的商城模式。既然作为电子商城,就必须要有齐全的必备功能来保障其运行。小编就以购物类的小程序为例,来谈谈开发这么一个小程序需要哪些必备功能。

  • 餐饮行业开发微信小程序,有什么形式可以选择

    衣食住行一直是人类生活的必须环节,而且这四个方面的商家经营模式大多数都是以线下门店体验为主。现在小编以“食”这个维持人类生命的重点来举例,说说餐饮行业开发微信小程序,到底可以有什么形式可供选择。

  • 广州企业如何快速开发一款微信小程序

    微信小程序的开发虽然是轻量化产品的开发,有着“小”这个特点,开发难度也比较小,但是真正开发仍旧需要一定的时间。而如果一个企业,着急着想要看到小程序的开发成果,

  • 微信小程序带来的改变有哪些方面?

    微信小程序出现了一年了,越来越多的用户知道小程序的存在,也越来越多的用户开始去使用它,用户使用惯性正在逐渐养成

PC蛋蛋QQ群 河北快3网址 pc蛋蛋 pc蛋蛋网站 广西快三 PC蛋蛋QQ群 pc蛋蛋开奖直播 广西快三 广西快3平台 pc蛋蛋网站