仿钉钉顶部图标滑动

最新推荐文章于 2024-11-16 11:58:36 发布

原创最新推荐文章于 2024-11-16 11:58:36 发布

· 290 阅读

0 ·

版权

文章标签：

#html

这篇博客介绍了如何在H5和App中实现滑动时底部进度条跟随滑动的效果。通过使用scroll-view组件并调整CSS样式，隐藏滚动条但保持可滚动功能。内容包括设置white-space、display属性，以及在不同平台上的适配方法。同时，展示了数据结构和Vue模板代码，用于渲染列表并监听滚动事件来更新进度条位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

主要滑动时底下进度条得跟着滑动。使用scroll-view 注意 :show-scrollbar="false"不展示滚动条这个属性只在app生效。h5的话需要

/deep/.uni-scroll-view::-webkit-scrollbar {
       /* 隐藏滚动条，但依旧具备可以滚动的功能 */
       display: none;
       width: 0;
       height: 0;
       color: transparent;

}

imglist: [
					[{
							img: 'https://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/home/baifang.png',
							txt: "拜访客户",
							id: "1"
						},
						{
							img: 'https://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/home/rizhi.png',
							txt: "写日志",
							id: "6"
						}
					],
					[{
							img: 'https://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/home/qianzai.png',
							txt: "潜在客户",
							id: "2"
						},
						{
							img: 'https://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/home/genjin.png',
							txt: "新增跟进",
							id: "7"
						},

					],
					[{
							img: 'https://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/home/yixiang.png',
							txt: "意向客户",
							id: "3"
						},
						{
							img: 'https://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/home/xinzeng.png',
							txt: "新增客户",
							id: "8"
						},
					],
					[{
							img: 'https://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/home/huoyue.png',
							txt: "活跃客户",
							id: "4"
						},
						{
							img: 'http://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/web/fjkh.png',
							txt: "附近客户",
							id: "9"
						},
					],
					[{
							img: 'http://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/web/jd.png',
							txt: "竞争对手",
							id: "5"
						},
						{
							img: 'http://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/web/rc.png',
							txt: "我的日程",
							id: "10"
						},
					],
					[{
						img: 'http://jgj-prd.oss-cn-hangzhou.aliyuncs.com/image/web/khcc.png',
						txt: "客户查重",
						id: "11"
					},
					{
						img: '',
						txt: "",
						id: ""
					},
					 ]

				],

注意app会不生效滚动。所以要在scroll-view下面，循环项上面v-for="(i,index) in imglist"加一行<view style="white-space: nowrap;flex-direction: row;"> </view>

父元素要设置white-space: nowrap; 子元素的设置display：inline-block

<template>
	<view class="mainbox">
		<view class="content-box">
			<scroll-view scroll-x="true" class="flex top1" :show-scrollbar="false"
				style="height: 460rpx;white-space: nowrap;flex-direction: row;" @scroll="scroll">
				<view style="white-space: nowrap;flex-direction: row;">
					<view class="tuwen" v-for="(i,index) in imglist" :key="index" style="display: inline-block;">
						<view @click="chagebar(item)" v-for="(item,v) in i" :key="v" class="spance">
							<image :src="item.img" mode="" class="img" v-if="item.img"></image>
							<view v-else style="width: 50rpx;height: 50rpx;">
							</view>
							<view style="margin-top: -20rpx;" v-if="item.txt">
								<text class="z14">{{item.txt}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="top-nav">
				<view class="top-nav-child" :style="'left:'+(old.scrollLeft)+'rpx'">
				</view>
			</view>
		</view>
	</view>
</template>

	scroll(e) {
				if (Number(e.detail.scrollLeft) > 60) {
					this.old.scrollLeft = 60
				} else {
					this.old.scrollLeft = e.detail.scrollLeft
				}
			},

这个主要是css麻烦些

<style scoped lang="scss">
	/* 解决H5 的问题 */

	/* #ifdef H5 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;

	}

	/* #endif */


	.mainbox {
		width: 750rpx;
	}

	.charts-box {
		// width: 100%;
		height: 300px;
	}

	.bg {
		width: 750rpx;
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		background-color: #F5F5F5;
	}

	.tuwen {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 140rpx;
		margin-top: 20rpx;
		justify-content: space-between;
		display: inline-block
	}

	.zi {
		position: absolute;
		right: 10rpx;
		top: -4rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.flex {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 750rpx;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		white-space: nowrap;
	}

	.z18 {
		font-size: 36rpx;
		color: #0e1a2d;
	}

	.z16 {
		font-size: 32rpx;
		color: #91979f;
	}

	.z14 {
		font-size: 28rpx;
		color: #4f5763;
	}

	.z12 {
		font-size: 24rpx;
		color: #91979f;
	}



	.img {
		width: 96rpx;
		height: 96rpx;
	}

	.top1 {
		width: 750rpx;
		background-color: #F5F5F5;
		// height: 220rpx;
		padding: 20rpx 0;
		/* #ifdef APP-PLUS */
		padding: 0 0 40rpx 0;
		/* #endif */
		padding-left: 35rpx;
		padding-right: 32rpx;

	}

	.spance {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 175rpx;

	}


	.top-nav-item {
		width: 168upx;
		line-height: 82upx;
		text-align: center;
	}

	.top-nav {
		position: absolute;
		left: 300rpx;
		bottom: 32rpx;
		width: 120rpx;
		background: #D8DADE;
		height: 4rpx;
		border-radius: 2rpx;
		transition: all 0.5s;
	}

	.top-nav-child {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		width: 60rpx;
		background: #337CF2;
		height: 4rpx;
		border-radius: 2rpx;
		transition: all 0.5s;
	}
</style>