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

发布时间:2025-04-08 11:26 浏览次数:448

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


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


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


静态页面


首先先写个静态页面



   


           

    • 左右半透明


                   

    • 滚动列表


                   

    • 左右半透明


                   

    • 滚动列表


                   

    • 伪类


                   

    • 渐变


                   

    • 内容


       



    如果是微信小程序,类似的写一个



               左右半透明


               滚动列表


               左右半透明


               滚动列表


               伪类


               渐变


               内容



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


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


    小程序开发

    腾虎网络持续为企业提供小程序开发,APP开发,软件定制开发,微信开发,OA办公系统,CRM系统,ERP管理系统,公众号开发,金融,教育,商城,医疗,政务小程序开发等互联网业务已经有20年之久,让企业与用户快速连接起来。

    关闭

    在线留言