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

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、实例运行效果展示

微信小程序开发 


声明:文章"微信小程序开发教程:文字滚动的两种实现方式"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:13119592416(高生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序,是否会成为O2O重新崛起的契机?

    O2O这一商业模式,在经过一段时间的推广与试水之后,效果并不理想,除了出行以及餐饮外卖这两个领域在O2O模式上有一定的发展之外,很多行业都取不到实质性的发展,甚至到了谈O2O色变的地步。而造成这种局面的主要原因是什么?小编认为是缺乏一个可以连接线上场景与线下场景的实质式平台。

  • 微信小程序开发,想要突破重围力压对手这样做

    ​虽说微信小程序现在的开发市场竞争力还不是很大,但是小程序的开发数量还是在以快速的增加速度增长着,因而市场竞争压力也会逐渐加大,一如公众号当初的发展趋势一样。对于一些比较迟进入小程序

  • 广州微信餐饮行业的小程序关键词要怎么设置

    小编在之前的推文中说过,餐饮行业在开发小程序时,需要注重小程序的关键词设置,来达到提高门店曝光率与搜索数量,并在微信搜索排名中争取更加靠前的排名,将门店的小程序尽可能多地呈现在微信用户面前。那么,对于如此重要的关键词设置

  • 广州微信小程序,组合拳开发促进高效收银

    关于酒店、餐饮等行业的收银结账开发票工作,经常需要排队已经成为消费者的诟病。为了解决这个常存的麻烦,微信官方于6月29日在厦门的公开课里提出了微信小程序开发“组合拳”模式,

  • 抢占市场唯快不破,小程序先入为利的优势凸显

    在没抢到微信公众号红利的之后,很多人也将错位小程序的市场红利。因为大家对小程序还处在观望甚至不看好的状态,当然就不会去开发它。可是,随着小程序自身的不断完善与发展,它先入为利的优势已经渐渐浮出水面。所以对于不看好小程序的人来说,这简直

  • 如何避开小程序被封号的危险?

    前阵子风风火火的微信账号封号风波,给被封号微信自媒体的媒体人蒙头一棒,但也同时给同行业的人提了醒,让大家重新重视起微信的禁忌,以免被封号。而且,不仅微信公众号会有封号的危险,小程序账号也会