小程序实现横向滑块，超过10个则出现查看更多

baiy 发布于2019-08-30 15:44 / 1670人阅读

摘要：需求是小程序下增加横向滑块，用于展示专题列表思路是用遇到的问题是超过个后，我添加的点击更多块总是居下显示解决办法是给最后点击更多的块加上啊啊啊啊啊查看全部单品最后效果

需求是小程序banner下增加横向滑块，用于展示专题列表

1.思路是用 scroll-view + scroll-x="true"
2.遇到的问题是：超过10个后，我添加的点击更多块总是居下显示

解决办法是：给最后点击更多的块加上vertical-align: top;

HTML

       
         
            
          啊啊啊啊啊
          ￥456{{index}}
         
         
            +10
            查看全部单品

CSS

    .special-list{
    width: 100%;
    height: 307rpx;
    overflow: hidden;
    padding: 20rpx 0 0 38rpx;
    background: #fff;
    white-space: nowrap;
    .special-scroll{
      height: 330rpx;width: auto;overflow:hidden;
    }
    .special-item{
      height:184rpx;
      width: 184rpx;
      display: inline-block;
      margin-right:40rpx;
      background-color: #aaa;
      .image{
        height:184rpx;
        width: 184rpx;
      }
    }
    .name{
      font-size: 20rpx;
      color: $normalGrayFont;
      -webkit-line-clamp:1;
      overflow: hidden;
      display:-weblit-box;
      word-break: break-all;
      text-overflow: ellipsis;
    }
    .price{
      font-size:28rpx;
    }
    .special-item-last{
      height:184rpx;
      width: 184rpx;
      border:2rpx solid #ffffd;
      border-radius:2rpx;
      display: inline-block;
      margin-right:40rpx;
      text-align: center;
      vertical-align: top;
      padding:44rpx 0;
    }
  }

最后效果

云服务器 GPU云服务器更多小程序小程序的出现小程序如何实现小程序如何实现直播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116370.html

反射改变TabLayout属性

摘要：第二种在原有基础上通过继承控件，重写其中几个方法，并且通过反射来修改部分属性，也能达到第一种方案效果。因此这里需要用反射替换成自己的滑动监听，然后在的监听类中的方法，改变的颜色。通过反射找到源码中成员变量，然后设置暴力访问权限。目录介绍 01.遇到的实际需求分析 02.原生TabLayout局限 03.TabLayout源码解析 3.1 Tab选项卡如何实现 3.2 滑动切换T...

GeekGhc 2019-08-16 18:24 评论0 收藏0
阿里云存储，让更多的创新在身边发生

摘要：凭借多层次防护跨区域容灾等能力，阿里云已经连续三年入选全球云存储魔力象限，位列全球领导者地位这样的殊荣，真的是不多见。通过持续不断的努力，阿里云希望解决这些问题，让更多的创新在我们身边发生。作者｜康翔编辑｜阿冒设计｜沐由在个人有限的技术领域和视野内，缩略语CDS的指向一直非...

pingan8787 2021-09-30 09:47 评论0 收藏0
better-scroll与UC浏览器滑动翻页冲突的js解决方案

摘要：问题最近在用写端项目时发现个问题，的横向滑动和浏览器的横向滑动翻页效果出现了冲突。思路我们虽然不能禁止浏览器的跳转操作，但是我们可以阻止滑动元素触发的所有默认事件啊。问题：最近在用vue写m端项目时发现个问题，better-scroll的横向滑动和UC浏览器的横向滑动翻页效果出现了冲突。简单的说，就是滑动scroll组件的时候也会触发UC浏览器自带的翻页效果。为此在网上找了不少...

anquan 2019-08-23 13:57 评论0 收藏0
12个值得关注的顶级可视化JS库涉及图表、动画、时间处理，表格操作

摘要：本文是译文，原文是我在原文的基础上加了百度的图表库，这个也是毫不逊色其他图表库的。更新记录图表类数据驱动文档通常被称为最强大的开源可视化库。是迄今为止最好的图表库。在顶级功能支持，使任何元素可拖动，可旋转或可滑动滚动和快速性能的能力。本文是译文，原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库，这个也是毫不逊色其他图表...

JinB 2019-08-20 14:14 评论0 收藏0