×

微信小程序之坑:使用scroll-view模拟元素item滚动效果

作者:admin2019.03.27来源:Web前端之家浏览:848评论:0
微信公众号

微信公众号

500.jpg

回顾上篇文章,我们聊到“美化微信小程序中的轮播效果”,如何巧妙的应用轮播效果,今天继续聊聊小程序。

刚刚做了个需求,遇到了坑,需要在小程序里做多个导航功能,达到设计师的效果。这个应用在APP里也很常见,毕竟屏幕只有那么宽,要放很多个导航标签,只能采用滚动,我们先来了解如何实现滚动。

首先跟PC和H5一样,我们必须在外部的标签加样式,例如:

WXML

<view class='cen-tabs-con'>
    <scroll-view scroll-x>
        <view id='{{index}}' class='cen-tabs-item {{currentTab == index ? "tabstadus":""}}' wx:for='{{tabs}}' wx:key="*this" bindtap='itemClick'>{{item}}</view>
    </scroll-view>
</view>

我们实现向左滚动,首页到scroll-view滚动标签,向左滚动的话,我们加上属性scroll-x。来看下样式代码,如下:

WXSS

//外部box
.cen-tabs-con{
position:relative;
width:690rpx;
font-size:0;
height:90rpx;
text-align:center;
white-space:nowrap;
overflow:hidden;
}

//元素item
.cen-tabs-item{
display:inline-block;
width:25%;
line-height:1.6;
font-size:32rpx;
height:90rpx;
color: #151515;
}

注:跟PC和H5一样,外部BOX样式主要在于white-space:nowrap和overflow:hidden两个,强制不换行并且超出BOX隐藏,然后BOX内的元素并排display:inline-block(可用其他方法)。

然后在手机预览下效果,发现滚动的时候发现,跟PC和H5一样的问题:默认底部会有个实线的滚动条,如下图:

image.png

这个效果很难接受的,尤其是到了设计师和产品那,完全不能通过。我们知道,处理这个问题在PC和H5中一般比较麻烦,需要用到插件,或者写很多代码,但是在微信小程序里,我们只需要一段CSS代码就可以搞定,如下:

::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}

其实原理就是把滚动条的宽高都设置为0,颜色也没了,这样看上去就的效果就完美了。

不知道您有遇到这样的情况吗,赶紧去试一试吧。

你如果有更好的方法可以留言给我们,也可以加群讨论哟~~~~

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/xiaochengxuq84098209482148.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • www.micai18.com

    写的很详细...

  • 子午物联网

    这个博客,由衷的喜欢...

  • 访客

    文章不错,非常喜欢...

  • cnwebe

    新媒体运营交换友情链接https://www.cnwebe.com换吗...

  • admin

    请加上链接...

  • admin

    已加上...

  • 物联网应用

    交换个链接如何?物联网应用www.ziwuiot.com...

  • zzzmh

    你好自己写的个人技术博客https://zzzmh.cn麻烦友链申请...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero