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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 政府单位开发微信小程序有什么好处

    小编通过软文谈论过很多行业开发微信小程序的好处,今天这篇推文同样也要来讨论开发的好处,不过今天的主题是关乎政府单位的话题,与商业行业还是有些不同,所以小程序带给它的作用与好处相对会更偏向公益化,而非利益化。

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

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

  • 开发微信小程序对哪些行业影响比较大?

    虽然小程序从内测到上线后都没有来势汹汹的气势,但还是止不住小程序的各种优点的传播发散以及对一些

  • 一个新开发的微信小程序,要如何提高搜索排名?

    针对小程序在微信搜索中排名前后这个问题,微信官方给出了一套排名标准,其中进入到小程序行列中的时间长短占的比例比较大,但这一方面对于新开发的小程序排名来说基本没有什么用。那么,新开发的小程序要如何去做才能快速提高自己的搜索排名呢?

  • 微信小程序放出新功能,传送门开启更便捷

    为了让微信小程序在使用上能够更加便捷,微信官方又开放了两个新功能,作为便捷的“传送门”来让小程序本身引流、为公众号引流的效果更进一步

  • 目前的微信小程序所不能及的三个方面

    微信小程序从上线至今大约半年,腾讯官方不断地在调整优化其功能设置,尽量让小程序的开发体验与使用体验做到令人满意的程度。可是,至今有三个方面仍是小程序所不能及的,这三个方面也限制了小程序的在某些方面的推广与发展,目前来看是不利的。

彩都会彩票充值 桔子彩票官网 凤凰彩票充值 购乐彩官网 好彩客官网 凤凰彩票 139彩票官网 159彩票充值中心 118彩票官网 千旺彩票官网