微信小程序開發教程:文字滾動的兩種實現方式

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(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 開發一個微信小程序到底能干嘛

    微信小程序這個名詞,在張小龍向外界預告時就已經被外界將熱度炒到一個較高的位置。但是,名詞雖然熟悉,其功用卻仍舊很多人沒有了解

  • 微信小程序開發與APP開發的區別

    微信小程序被說看成是一個原生App似的產品,這并不是空穴來風,而是小程序在開發上的定位與功能

  • 小程序開發公司分析如何開發獲取用戶基本信息

    微信小程序平臺運營時,要獲取獲取用戶的基本信息,是需要用戶授權的,而這種授權獲取的開發,需要調用wx.login接口、login接口等

  • 微信小程序開發——企業品牌宣傳推動力

    企業擁有自己的品牌,隨之而來的工作就是進行宣傳推廣,而企業品牌策劃實施的要點,主要就分為三個部分:方式創新、體驗滿意跟促進分享。這每一個方面都是樹立品牌形象、提升品牌知名度的必要過程,依靠微信小程序開發區推動企業品牌宣傳也必須如此。

  • 微信小程序官方開發工具的優缺點有哪些

    技術人員在開發微信小程序時,可供選擇的開發工具一般有微信官方開發工具、即速應用、WebStorm以及Sublime Text 3這幾種。今天,小編暫且拋開其他非官方的開發工具特點,用這篇軟文來說說官方開發工具的優點與缺點所在。

  • 廣州微信小程序定制開發時的注意事項

    廣州地區現在開發微信小程序的企業商家越來越多,并且很多人會選擇以定制的形式來開發,費用不高

上海快三走势图上海快3形态走势