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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序开发技术教程:视图容器组件详解(一)

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

  • 微信小程序上亿日活跃用户,开发优势日渐显现

    微信小程序上线之前,很多人对它满怀期待,但是线上体验过后,大部分用户又都回归手机应用,因为用户体验并不是多好

  • 开发微信点餐小程序,服务管理更便捷,经营成本有效降低

    微信小程序作为一个工具型的产品被开发与推广,有多种可以作为工具使用的场景可以选择,餐饮行业的点餐工具就是常见的

  • 微信小程序与公众号的区别是什么?

    微信事业群在微信开发的过程中,孵化出微信小程序与微信公众号这两个方向,然后目前微信小程序开发

  • 开发微信小程序,用“社交+购物”模式促爆发式发展

    微信小程序从面世以来,官方就不断在朝服务直达搜索、公众号串联小程序、线上线下打通、好友社交传播等方向努力开发

  • 微信小程序新增四项能力,信息展示开发越强大

    微信官方在小程序功能的开放之路真的是越走越远,现在又就着信息展示模块来开放了四项新能力,来提升用户的体验以及小程序运营者的管理体验,小编只能说这次的事情搞得依旧深得人心。按照写作流程,在夸完新能力深得人心之后,小编就要来介绍一下这四项新能力了。

河北快3走势图 双赢彩票充值中心 江苏快3官网 河北快3 河北快3 河北快3 河北快3 彩都会彩票充值中心 江苏快3官网 178彩票充值中心