微信小程序小技巧系列《四》使元素占滿整個(gè)屏幕高度，修改swiper 圓點(diǎn)樣式
發(fā)布時(shí)間：2018-02-06 17:14 所屬欄目：小程序開(kāi)發(fā)教程
一：微信小程序中使元素占滿整個(gè)屏幕高度
在項(xiàng)目中經(jīng)常要用到一個(gè)容器元素占滿屏幕高度和寬度，然后再在這個(gè)容器元素里放置其他元素。
寬度很簡(jiǎn)單就是width:100%
但是高度呢，我們知道的是height:100%必須是在父元素的高度給定了的情況下才可以。
以前我的做法是用js獲取屏幕的高度，然后將其賦值給height，
屏幕高度在網(wǎng)頁(yè)中為:window.innerHeight;
在微信小程序中則需要調(diào)用wx.getSystemInfo接口，然后通過(guò)setData賦值
但是顯然通過(guò)js來(lái)進(jìn)行的，效率上肯定不如css直接給定樣式。
于是我們使用另一種方法:
在網(wǎng)頁(yè)中設(shè)置body,html{height:100%};
將body和html設(shè)置為100%，這樣我們就可以在他們的子元素中使用height:100%來(lái)使的我們的容器元素占滿屏幕的高度啦。
但是在微信小程序中，是沒(méi)有dom對(duì)象的，但是我們看調(diào)試工具可以看到在dom樹(shù)(我也不知道怎么叫了，就這么叫吧)中，根節(jié)點(diǎn)是page，所以我們來(lái)試試使用page{height:100%}
果然，是可行的。高度占滿了整個(gè)小程序的窗口。
二：swiper 圓點(diǎn)樣式怎么修改
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%;
}
|
三：判斷當(dāng)前項(xiàng)讓其滑動(dòng)
場(chǎng)景如下：
wx:for動(dòng)態(tài)讀取一個(gè)列表，綁定touchstart、touchmove、touchend事件，代碼如下
wx:for動(dòng)態(tài)讀取一個(gè)列表，綁定touchstart、touchmove、touchend事件，代碼如下
<block wx:for="{{arrayList}}">
<view catchtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchmove">{{username}}</view>
</block>
|
解決方法：每個(gè)item都加入一個(gè)style="left:{{arrayList.left}}"，然后滑動(dòng)的時(shí)候動(dòng)態(tài)改變left(當(dāng)前項(xiàng)實(shí)際數(shù)值，其他項(xiàng)0)
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.u-renovate.com/wxmini/doc/course/21672.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
