小程序scroll-view 实现两行滑动金刚区，滑动进度条

业务需要，需要做一个两行可滑动的金刚区展示模块，效果图如下：

代码如下：

 <!-- 中间金刚区目录图标区域 --><view class="second-module-allicon"><scroll-view class="nav-bar" scroll-x bindscroll="scroll"><!-- 使用flex布局实现横向滚动，在scroll-view里加一层容器包裹，才会出现滚动效果 --><view class="nav-bar-wrap"><block wx:for="{{secIcons}}" wx:key='key'><view class="nav-bar-item" bindtap="onNavbarItem" data-id='{{item.catalogId}}' data-name="{{item.name}}"><image src="{{item.imgUrl}}" /><text>{{item.name}}</text></view></block></view></scroll-view><!-- 模拟进度条 --><view class="slider"><view class="slider-inside .slider-inside-location" style="left:{{left}}"></view></view></view>

css代码如下:

/* 图标模块 */
.second-module-allicon{background: #ffffff;border-radius:8px;position: relative;height: 380rpx;overflow : hidden;
}scroll-view {white-space: nowrap;
}
/* 去除滚动条 */
::-webkit-scrollbar {display:none;width:0;height:0;color:transparent;
}
.nav-bar-wrap {display: flex;flex-flow: column wrap;    /* 金刚区排序方式*/height: 330rpx;
}.nav-bar-item {width: 175rpx;display: flex;flex-direction: column;align-items: center;padding-top: 28rpx;
}.nav-bar-item image {display: block;height: 88rpx;width: 88rpx;margin: 0;
}.nav-bar-item text {margin-top: 8rpx;line-height: 34rpx;color:rgba(51,51,51,1);font-size: 24rpx;
}.slider {position: absolute;bottom: 20rpx;left: 50%;transform: translateX(-50%);width: 64rpx;height: 6rpx;border-radius: 3rpx;background: #eee;
}.slider-inside {transform: translateX(-100%);width: 42rpx;height: 100%;border-radius: 3rpx;background-color: #31B877;
}
/* 滑块滑动模拟 */
.slider-inside-location {position: absolute;left: 65.625%;
}

js代码如下:

Page({data: {left:0.625  // 初始化滑块位置},//金刚区滑动事件scroll(event){let scrollLeft = event.detail.scrollLeft + 375;let scrllWidth = event.detail.scrollWidth;let left;if(scrollLeft < 395){left = `65.625%`}else{left = `${(scrollLeft) / scrllWidth * 100}%`}this.setData({left, //模拟滑块滑动 根据css设置 距离左边的百分比})},})

小程序scroll-view 实现两行滑动金刚区，滑动进度条相关推荐

小程序两行金刚区以及进度条平滑滚动的实现
金刚区是什么,可能还有很多小伙伴不了解,不了解的来补课吧. 看这张图就懂了: 什么是金刚区金刚区模块是整个界面布局的核心功能区域,通常布局在页面顶部 Banner 之下,金刚区的功能模块不会固定化, ...
微信小程序组件解读和分析：六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
wepy小程序聊天记录选择文件上传 wx.chooseMessageFile 带有进度条动画支持文档打开完整记录
#需求:从聊天记录中选择文件,支持的文件格式doc, docx, pdf,同时支持上传的文档打开文件选择与上传文件后展示模版代码: <van-cell title="从微信聊天记录中 ...
小程序scroll设置（滚动轴样式、真机测试不能滑动）
一.先说scroll真机测试不能滑动的问题 1.我做的项目是公司的一个小程序商城.产品是个妹子,UI+产品+运营,反正啥都会,尤其是提需求.要不是因为她比我重,我早就打她了.我本来已经做好了一个点击购 ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
微信小程序把view居中_初识微信小程序
"晓程序" 小程序连载笔记,通俗易懂,欢迎各位转发关注学习.未经作者授权,禁止转载初识小程序什么是微信小程序微信小程序,小程序的一种,英文名Wechat Mini Progr ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
android获取小程序音频时长,最新微信小程序获取音频时长与实时获取播放进度...
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...
最新微信小程序获取音频时长与实时获取播放进度
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...

小程序scroll-view 实现两行滑动金刚区，滑动进度条

小程序scroll-view 实现两行滑动金刚区，滑动进度条相关推荐

最新文章

热门文章