一、view的居左顯示
在wxss裡可以設定樣式與布局方式,position:fixed可以讓控制項居左,居上,居右和居下。通過left:50rpx;等設定居該位置以及距離。
但是這種屬於絕對定位,感覺不太靈活。
fixed方式是嚴格定在螢幕中某一位置,如處在可滑動或變換的父布局內,則會顯示異常,父布局移動而子布局定住。
二、布局背景的陰影和圓角設定
box-shadow設定陰影
border-top-left-radius設定左上角圓角,值為百分比如1%,其他三個角同理。
三、view的偏移
如果想讓乙個view疊加在另乙個上面,有一種方法是設定view的position屬性為相對(relative),之後設定某一位置的偏移量即可,如50rpx或-50rpx,乙個是正向偏移,乙個是反向偏移。
四、橫向列表設定
scroll-view設定croll-x為true。
scroll-view子布局view_container設定display為flex。同時flex-direction為row。並且white-space為nowrap
之後在view_container裡設定view使用wx:for屬性進行迴圈生成列表。
五、text自動換行,限定行數
涉及到的css屬性
1、text-overflow
text-overflow:文字溢位處理
這個屬性有三個值
clip:裁剪多餘部分
ellipsis:省略號代替多餘文字
string:使用給定文字替換多餘文字
2、overflow
overflow:溢位處理
其值如下
visible:預設值,不處理,仍然顯示溢位部分
hidden:隱藏溢位部分
scroll:內容會被裁剪,但是瀏覽器會顯示滾動條以便檢視內容
auto:如果內容被裁減,則瀏覽器會顯示滾動條以便檢視內容
inherit:從父類繼承overflow屬性
3、display:-webkit-box
box屬性是與其他屬性結合使用
-webkit-line-clamp:2 這個屬性需要與-webki-box屬性結合使用,限制文字行數
-webkit-box-orient:設定伸縮盒子物件子元素排列方式,作為結合屬性使用
以上幾點做到後,單個布局中的文字換行應該就可以做到了。但是處於橫向列表中時,顯示仍然有問題,接下來看一下這個重要的屬性。
4、white-space
這個屬性是控制文字中文字多餘一行時空格和tab顯示效果的。
主流用法有三個值
normal:預設值,沒有新起一行也沒有tab,直接連續顯示
pre-wrap:會有新的一行,也會有tab,像真正的課文
pre-line:會有新的一行,但是沒有tab,這種像段落間開頭不空格,直接左側對齊顯示。
六、image拉伸壓縮設定
通過設定mode屬性來控制如何壓縮,在wxml裡設定。
小程式開發的心得
主要研究了icon,text,process三個元件 1,icon 這個還挺好玩的,比iconfont好用的多,但是就是設定的樣式挺少的,提供的選擇不是很多,用起來也還行,就用icon標籤就好了,後面跟上icon的size,type,color,乙個icon圖示就出來了,提供的樣式請參考官網 ps ...
手機程式開發心得
困難 1.狀態列顯示與網路連線的衝突 在進行網路連線前,讓視窗的狀態列顯示 正在通訊,請稍候 可是狀態列一直無顯示,影響使用者體驗 2.net framework1.1 與.net framework2.0 的不同將乙個字串的 hash 值作為引數,呼叫 getstring 函式,用 net fra...
小程式開發
這次小程式開發所有功能和元件全部都是自己手寫 的,因為之前也沒意識到用別人的外掛程式,所以花費了比較大的力氣,幾乎每天晚上都是7點半之後才下班,雖然辛苦了幾個月,但是還是有所收穫的,記下筆記,放下下次可以快速上手 1.小程式的模態框有以下幾種,差不過等於alert confirm,而且自動居中,這些...