258资源分享网

为了更好的体验左右滑动，而且更加美观，我们常常会做如下效果：

通过伪类+渐变实现左右半透明的滚动列表，微信小程序同样也适用，渐变的兼容性不太好，所以我们需要针对不同的浏览器写不同的代码。

静态页面

首先先写个静态页面

<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

然后写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 控制左右半透明的长度，根据需求更改

如此便通过伪类+渐变实现了左右半透明的滚动列表