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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 定制开发微信小程序之前需要搞清的4个问题

    一个企业想要定制开发小程序之前,必须要对小程序有一定的了解,特别是以下4个问题,在定制开发之前一定要弄清楚,才能帮助企业做出正确的开发决策。

  • 微信小程序开发之新功能开放预告

    据某不知名群众报道,腾讯微信又开始内测一项新功能,虽然这样的消息流出套路已经不止一次,

  • 微信小程序开发与互联网+之间,有什么关系

    微信小程序开发与互联网+都是近年来的热词,两者看似没有联系,但其实也有联系。我们所说的互联网+就是指互联网+各种传统行业的形式,是一种互联网创新形式。

  • 微信小程序开发结合什么商业模式会更有利于其发展

    随着微信小程序的高调崛起,各类行业的需求开发者也在逐渐将目光看向小程序开发。

  • 微信小程序搜索排名的规则是怎样的

    在网站排名建设中,企业官网在各大网站的平台位置不是随随便便就能有的,而是要经过一定的规则竞争、筛选后才有排名先后的区别。而在前不久,微信小程序的搜索入口也开始了排名竞争。所以,想要让自己的小程序在搜索行列的排名比较靠前、更加容易被用户搜索到,就需要了解一下微信小程序搜索排名的规则究竟是怎么样的。

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

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

购乐彩官网 河北快3 2m彩票官网 大信彩票充值 128彩票充值中心 河北快3走势图 123彩票充值 河北快3 双赢彩票 大象彩票充值中心