[插件]微信小程序实现列表，左右滑动的效果

楼主^#

更多发布于：2019-12-26 09:35

在项目中，需要实现图片列表横向滑动，效果如下图：

图片：huadong.jpg

代码如下：
wxml:

&lt;scroll-view scroll-x class="scroll-x"&gt;
&lt;view class='list'&gt;
    &lt;view&gt;
      &lt;image src="/image/img1.png"&gt;&lt;/image&gt;
    &lt;/view&gt;
     &lt;view&gt;
      &lt;image src="/image/img1.png"&gt;&lt;/image&gt;
    &lt;/view&gt;
     &lt;view&gt;
      &lt;image src="/image/img1.png"&gt;&lt;/image&gt;
    &lt;/view&gt;
     &lt;view&gt;
      &lt;image src="/image/img1.png"&gt;&lt;/image&gt;
    &lt;/view&gt;
     &lt;view&gt;
      &lt;image src="/image/img1.png"&gt;&lt;/image&gt;
    &lt;/view&gt;
     &lt;view&gt;
      &lt;image src="/image/img1.png"&gt;&lt;/image&gt;
    &lt;/view&gt;
&lt;/view&gt; 
&lt;/scroll-view&gt;

wxss:

.scroll-x{
     width: 100%;
    background-color: #F5F5F5;
    padding: 20rpx 0 0;
    white-space: nowrap;
}
.list{
}
.list&gt;view{
    display: inline-block;
    height: 120px;
    width:100px;
    margin: 0 20px;
}
.list&gt;view  image{
    width:100%;
    height:100%;
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

注：

1.scroll-view 设置为横向滑动scroll-x=”true”
2.scroll-view的css要设置为 white-space: nowrap;
3.不要用 display: flex;,这样可能存在兼容问题，在android手机上可能滑动不了
4.scroll-view的子节点的css要设置为 display: inline-block;不然可能显示有问题
5.如果要禁用横向滚动条的显示需要在page界面的样式布局里面加上,不要在组件或者模块的样式布局里面加，参考::-webkit-scrollbar的样式
参考：https://blog.csdn.net/kai_1215/article/details/79094515

喜欢0

知识需要管理，知识需要分享

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

公众号

[插件]微信小程序实现列表，左右滑动的效果

最新喜欢：