微信小程序小技巧系列《四》使元素占滿整個屏幕高度，修改swiper 圓點樣式
發布時間：2018-02-06 17:14 所屬欄目：小程序開發教程
一：微信小程序中使元素占滿整個屏幕高度
在項目中經常要用到一個容器元素占滿屏幕高度和寬度，然后再在這個容器元素里放置其他元素。
寬度很簡單就是width:100%
但是高度呢，我們知道的是height:100%必須是在父元素的高度給定了的情況下才可以。
以前我的做法是用js獲取屏幕的高度，然后將其賦值給height，
屏幕高度在網頁中為:window.innerHeight;
在微信小程序中則需要調用wx.getSystemInfo接口，然后通過setData賦值
但是顯然通過js來進行的，效率上肯定不如css直接給定樣式。
于是我們使用另一種方法:
在網頁中設置body,html{height:100%};
將body和html設置為100%，這樣我們就可以在他們的子元素中使用height:100%來使的我們的容器元素占滿屏幕的高度啦。
但是在微信小程序中，是沒有dom對象的，但是我們看調試工具可以看到在dom樹(我也不知道怎么叫了，就這么叫吧)中，根節點是page，所以我們來試試使用page{height:100%}
果然，是可行的。高度占滿了整個小程序的窗口。
二：swiper 圓點樣式怎么修改
page .wx-swiper-dot{
width: 18rpx;
display: inline-flex;
height: 18rpx;
margin-right: 18rpx;
}
page .wx-swiper-dot::before{
content: '';
background: #8c8c8f;
flex-grow: 1;
border-radius: 100%;
}
page .wx-swiper-dot-active::before{
content: '';
background:#fff;
flex-grow: 1;
border-radius: 100%;
}
|
三：判斷當前項讓其滑動
場景如下：
wx:for動態讀取一個列表，綁定touchstart、touchmove、touchend事件，代碼如下
wx:for動態讀取一個列表，綁定touchstart、touchmove、touchend事件，代碼如下
<block wx:for="{{arrayList}}">
<view catchtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchmove">{{username}}</view>
</block>
|
解決方法：每個item都加入一個style="left:{{arrayList.left}}"，然后滑動的時候動態改變left(當前項實際數值，其他項0)
