一号彩票

  • <tr id='oGp7La'><strong id='oGp7La'></strong><small id='oGp7La'></small><button id='oGp7La'></button><li id='oGp7La'><noscript id='oGp7La'><big id='oGp7La'></big><dt id='oGp7La'></dt></noscript></li></tr><ol id='oGp7La'><option id='oGp7La'><table id='oGp7La'><blockquote id='oGp7La'><tbody id='oGp7La'></tbody></blockquote></table></option></ol><u id='oGp7La'></u><kbd id='oGp7La'><kbd id='oGp7La'></kbd></kbd>

    <code id='oGp7La'><strong id='oGp7La'></strong></code>

    <fieldset id='oGp7La'></fieldset>
          <span id='oGp7La'></span>

              <ins id='oGp7La'></ins>
              <acronym id='oGp7La'><em id='oGp7La'></em><td id='oGp7La'><div id='oGp7La'></div></td></acronym><address id='oGp7La'><big id='oGp7La'><big id='oGp7La'></big><legend id='oGp7La'></legend></big></address>

              <i id='oGp7La'><div id='oGp7La'><ins id='oGp7La'></ins></div></i>
              <i id='oGp7La'></i>
            1. <dl id='oGp7La'></dl>
              1. <blockquote id='oGp7La'><q id='oGp7La'><noscript id='oGp7La'></noscript><dt id='oGp7La'></dt></q></blockquote><noframes id='oGp7La'><i id='oGp7La'></i>

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

                发布日期:2020-09-05  浏览:465 

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

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

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

                静态页面

                首先先写个静态♀页面

                <div>

                    <ul>

                        <li>左右半透明</li>

                                <li>滚动列表</li>

                                <li>左右半透明</li>

                                <li>滚动列表</li>

                                <li>伪类</li>

                                <li>渐变</li>

                                <li>内容</li>

                    </ul>

                </div>

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

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

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