為了更好的體驗左右滑動,而且更加美觀,我們常常會做如下效果:
通過偽類+漸變實現(xiàn)左右半透明的滾動列表,微信小程序同樣也適用,漸變的兼容性不太好,所以我們需要針對不同的瀏覽器寫不同的代碼。
首先先寫個靜態(tài)頁面
<div class="my-list"> <ul> <li>左右半透明</li> <li>滾動列表</li> <li>左右半透明</li> <li>滾動列表</li> <li>偽類</li> <li>漸變</li> <li>內容</li> </ul> </div>
如果是微信小程序,類似的寫一個
<scroll-view class="my-list" scroll-x="true" enable-flex="true"> <text>左右半透明</text> <text>滾動列表</text> <text>左右半透明</text> <text>滾動列表</text> <text>偽類</text> <text>漸變</text> <text>內容</text> </scroll-view>
然后寫css
.my-list:after,.my-list:before { display: block; content: ""; position: absolute; z-index: 1; top: 0; height: 100%; width: 20% } .my-list:before { left: 0; background: -webkit-gradient(linear,left top,right top,from(#fff),to(hsla(0,0%,100%,0))); background:-webkit-linear-gradient(left,#fff,hsla(0,0%,100%,0)); background: -moz-linear-gradient(left,#fff,hsla(0,0%,100%,0)); background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0)); } .my-list:after { right: 0; background: -webkit-gradient(linear,right top,left top,from(#fff),to(hsla(0,0%,100%,0))); background: -webkit-linear-gradient(right,#fff,hsla(0,0%,100%,0)); background: -moz-linear-gradient(right,#fff,hsla(0,0%,100%,0)); background: linear-gradient(270deg,#fff,hsla(0,0%,100%,0)); }
其中 .my-list:after,.my-list:before 中 width 控制左右半透明的長度,根據(jù)需求更改
如此便通過偽類+漸變實現(xiàn)了左右半透明的滾動列表