小程式scroll-view中文字不換行問題
問題描述:在scroll-view 中scroll-x="true"時控制文字超出顯示省略號,要求如圖:
但實際中會出現如文字不換行或樣式錯亂的問題。
橫向滾動的實現如下:
超過兩行顯示省略號:
.scroll_txt{ word-wrap: break-word; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient因為scroll-view上設定了 white-space:nowrap;導致文字不換行,如圖:
這時在.scroll_txt 上新增 white-space:normal !important; 文字換行但是樣式錯亂。如圖:
在父級元素上增加 overflow:hidden; 得以解決。(ios可能出現相容問題,可加層view並浮動)。
相關推薦
小程式scroll-view中文字不換行問題
問題描述:在scroll-view 中scroll-x="true"時控制文字超出顯示省略號,要求如圖: 但實際中會出現如文字不換行或樣式錯亂的問題。橫向滾動的實現如下:超過兩行顯示省略號:.scroll_txt{
微信小程式 scroll-view 橫向劃不動
當是垂直滾動的時候,官網的例項即可完成 當是水平滾動的時候,注意: <view class="a-scroll"> <scroll-view scroll-x class="my-scroll"> <view
小程式——scroll-view 頁面不滾動與隱藏導航條
1、隱藏導航條,只要在該頁面的 wxss 頁中加入以下程式碼就可以::-webkit-scrollbar { width: 0; height: 0; color: transparent; }2、頁面不滾動的解決辦法 1、原因:我所碰到的 2 次頁面不滾動
小程式scroll-view自動滾動到最下面
<scroll-view scroll-y style="height:500px;" scroll-top='{{scrolltop}}'> </scroll-view> 必須設定固定的height(高度),然後在js裡設定scroll-top值大於高度就行了,
小程式scroll-view橫向滾動
wxml <scroll-view scroll-x="true" style="background:black;height:110px; white-space: nowrap;"> <view style="background: red; width: 200px; height
微信小程式 scroll-view 實現錨點跳轉
在微信小程式中,使用scroll-view實現長頁面的標記跳轉,官方文件中沒有例子演示,錨點標記主要是使用<scroll-view>的scroll-into-view屬性。 實現錨點跳轉主要以下幾點: 1,最外層容器使用滾動檢視 2,賦值滾動到檢視,如:<s
微信小程式scroll-view和元件
scroll-view的css樣式很坑 按照下邊這個 .scroll-view_H{ white-space: nowrap; } .scroll-view-item{ height: 200px; }
微信小程式 scroll-view實現錨點滑動
轉載,原文: 微信小程式 scroll-view實現錨點滑動的示例 https://www.jb51.net/article/129897.htm 選擇scroll-view(可滾動檢視區域)元件來實現錨點效果。 具體實現 具體API就不贅述了,可以
微信小程式-scroll-view上拉多次觸發載入事件
之前那篇部落格裡邊寫了滑塊的margin屬性影響了滑動效果。這篇文章寫一下上拉時多次觸發上拉載入事件。 (改好的程式碼如下) 其實也比較簡單,就是有可能沒有意識到這個小細節。在官方文件中有這麼一個屬性(如圖)。這個屬性是設定距離底部多少距離是觸發事件。我們吧這個屬性設定成0就可以了。只有上拉到最
微信小程式scroll-view(滾動元件)與onPullDownRefresh(下拉重新整理)
一.官方api描述 在滾動 scroll-view 時會阻止頁面回彈,所以在 scroll-view 中滾動,是無法觸發 onPullDownRefresh 查閱大量資料以後發現一共有三種方式: 1.使用view代替scroll-v
小程式 scroll-view(橫向)scroll-into-view無效
最近使用研究微信小程式的scroll-view元件進行橫向佈局時,在onload時使用scroll-into-view進行定位,實際結果卻不是想要的。。以下兩種寫法對scroll-into-view定位都無效: (1)在scroll-view標籤上直接繫結 <scroll-view c
微信小程式scroll-view元件自適應不同高度的手機
已知微信相比於H5開發有rpx這個單位可以自適應一些不同寬度的手機,但是有的時候需要自適應一些手機高度賊大的手機比如iphoneX系列 所以scroll-view的wxss樣式裡肯定不能寫死,我能想到的方法就是js裡頭載入畫面前再設定高度 wxml裡 <scrol
微信小程式 scroll-view 滑動可視區域
微信小程式 sroll-view css屬性設定注意事項 1.sroll-view 必須設定 white-space: nowrap 段落文字中不換行 2.子元素需要設定為 內聯塊元素 display:in
小程式scroll-view元件 設定橫向滾動條位置 scroll-left 無效問題
這個問題只是部分做資料互動時可能會碰到的問題,發現設定的 scroll-left="200" 沒有起作用. 原因: 一般在頁面載入時我們會請求資料,並渲染列表, 但是我們在標籤或者data中設定的scroll-left值會在資料渲染前賦值. 此時的scroll-
微信小程式scroll-view的例項
近來團隊讓寫一個小程式專案,在寫某個模組首頁列表時,打算採用分頁方式請求後臺,下拉載入更多。 用到官方的一個關鍵標籤 scroll-view。 程式碼如下: 一.在wxml檔案中: <view class='tipsbar'>共有{{total}}個待簽收
微信小程式 scroll-view 填滿剩餘可用高度
發表於 2018-08-10 | 更新於 2018-08-15 | 分類於 專案記錄 , 小程式 根據微信小程式 scroll-view 文件所述,scroll-view必須給定一個固定高度。那麼如果我們想要讓它自動填充剩餘高度,該怎麼辦呢? 前言 在說出我的解決方案之前,先來看一
微信小程式 scroll-view 根據內容的高度自適應
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群 173683895 、 526474645 ; 正文: 1 <video autoplay sr
小程式scroll-view載入至最底部
根據業務需求要使小程式scroll-view中的內容每次都載入至最底部 小程式並沒提供這樣的屬性,因此通過設定scroll-top解決。 原理:scroll-top>內容長度時會載入至最底部。 方法: (1)計算出list中每個item高度:item_height;
微信小程式scroll-view橫向滾動真機測試失敗
問題描述: 微信小程式的scroll-view設定橫向滾動,在開發工具上顯示效果是正常的,但是在真機上測試橫向滑動的時候,整個手機螢幕跟著左移 解決: css樣式的問題:將scroll-view的樣式
微信小程式-scroll-view滾動到索引位置(二)
有一些重要的關鍵點請看上一篇文章 主要用到scroll-into-view 如果你想讓他回頂部 直接用scroll-top即可 話不多說,看程式碼 wxml <scroll-view scroll-y="true" scroll-into-view="{{to