小程式開發心得

2021-09-11 19:14:27 字數 1486 閱讀 5053

一、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,而且自動居中,這些...