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

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形态走势