小程序页面效果——如何实现左右半透明滚动列表

为了更好的体验左右滑动，更美观，我们经常会做以下效果：

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

先写一个静态页面。

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内容/scroll-view

静态页面

然后写css。我的名单。{ display:块之前的my-list :content :“”；绝对位置：z-index : 1；top : 0；高度： 100%；宽度： 20%}。{ left : 0 }之前的my-list :background :-web kit-渐变(线性，左上，右上，从(#fff)，到(hsla(0，0%，100%，0))；background :-web kit-linear-gradient(左，#fff，hsla(0，0%，100%，0))；背景：-moz-线性梯度(左，#fff，hsla(0，0%，100%，0))；背景：线性梯度(90度，#fff，hsla(0，0%，100%，0))；}.{ right : 0 }之后的my-list :background :-web kit-渐变(线性，右上，左上，从(#fff)，到(hsla(0，0%，100%，0))；background :-web kit-linear-gradient(右，#fff，hsla(0，0%，100%，0))；背景：-moz-线性梯度(右，#fff，hsla(0，0%，100%，0))；背景：线性梯度(270度，#fff，hsla(0，0%，100%，0))；}其中，宽度在。我的-list:after和。my-list3360before控制左右半透明的长度，可以根据需要改变。

这样通过伪类渐变实现左右半透明滚动列表。