创建网站公司 徐州,大连网站建设培训班,桂林网上服务,p2p理财网站开发前言
最近在用 UniApp 开发项目时#xff0c;需要一个横向滑动的工具栏。常见的工具栏一般都是竖着的#xff0c;但横向滑动的工具栏不仅能展示更多内容#xff0c;还能让界面看起来更加丰富。不过很多朋友可能会发现#xff0c;如何让内容“横着”展示又不变形、能流畅滚…前言
最近在用 UniApp 开发项目时需要一个横向滑动的工具栏。常见的工具栏一般都是竖着的但横向滑动的工具栏不仅能展示更多内容还能让界面看起来更加丰富。不过很多朋友可能会发现如何让内容“横着”展示又不变形、能流畅滚动、并且能自适应多种屏幕宽度还是有点麻烦的。
这篇文章我会带大家一步步用 UniApp 实现一个横向滚动的工具栏并讲解其中的一些关键点。话不多说咱们直接上代码 实现思路
横向工具栏的核心其实不复杂大致可以分成以下几步
用 scroll-view 组件实现横向滚动。使用 flex 布局将每个工具项如图标和文字在 tool-item 中垂直排列。优化 scroll-view 和 tool-item 的样式让它们看起来整齐美观。
主要组件和样式
在 UniApp 中scroll-view 是一个可以支持滚动的容器。在横向工具栏中我们设置 scroll-view 的 scroll-x 为 true这样它就可以左右滑动了。此外我们还会使用 flex 布局来控制工具栏中的每个图标和文字的排列方式。
页面布局
首先让我们来写一个基本的页面布局先不涉及复杂的样式。我们将横向工具栏放在一个 scroll-view 中每个工具项都放在一个 view 里。这样可以确保每个工具项是独立的而且整个工具栏可以横向滚动。
代码实现
1. 初始化项目和页面
首先创建一个新的 UniApp 项目可以直接使用 HBuilderX选择 uni-app 模板。在项目中创建一个新页面比如叫 toolbar。然后在页面的 .vue 文件中编写 HTML 结构。
templatescroll-view styleflex: 1view classcontainer!-- 轮播图部分 --view swiper classswiper :indicator-dotstrueswiper-item classswiper-itemimage classswiper-image :srcswiperImage[0] modeaspectFill/image/swiper-itemswiper-item classswiper-itemimage classswiper-image :srcswiperImage[1] modeaspectFill/image/swiper-itemswiper-item classswiper-itemimage classswiper-image :srcswiperImage[2] modeaspectFill/image/swiper-item/swiper/view!-- 横向滑动工具栏 --scroll-view scroll-xtrue classtool-barview classtool-item v-for(tool, index) in tools :keyindeximage :srctool.icon classtool-icon/imagetext classtool-text{{ tool.name }}/text/view/scroll-view!-- 工具分类卡片两列布局 --view classcard-containerview classcard stylebackground-color: #4fc3f7text classcard-title日常工具\n/texttext classcard-description聚合一些最热门最常用的工具/text/viewview classcard stylebackground-color: #f48fb1text classcard-title计算工具\n/texttext classcard-description计算器、温度、压力、单位换算工具…/text/viewview classcard stylebackground-color: #f06292text classcard-title查询工具\n/texttext classcard-description各种文字、专用信息、资源查询…/text/viewview classcard stylebackground-color: #4db6actext classcard-title图片工具\n/texttext classcard-description图片水印、压缩、取色、壁纸大全…/text/viewview classcard stylebackground-color: #81c784text classcard-title文字工具\n/texttext classcard-description暗语翻译器、特殊文本、编码工具…/text/viewview classcard stylebackground-color: #42a5f5text classcard-title开发工具\n/texttext classcard-description各种代码工具、网页转应用…/text/viewview classcard stylebackground-color: #64b5f6text classcard-title提取工具\n/texttext classcard-description视频提取、图片提取、网页提取…/text/viewview classcard stylebackground-color: #26a69atext classcard-title系统工具\n/texttext classcard-description应用管理、WiFi密码查看、壁纸工具…/text/view/view/view/scroll-view
/template2. 数据初始化
接下来给页面添加数据属性。这里包括 swiperImage 数组轮播图图片的路径和 tools 数组工具栏的图标和名称。在 script 部分中我们将这些数据初始化
script
export default {data() {return {swiperImage: [/static/image/swiper/img1.jpeg,/static/image/swiper/img2.jpeg,/static/image/swiper/img3.jpeg],tools: [{ name: 工具1, icon: /static/image/swiper/img1.jpeg },{ name: 工具2, icon: /static/image/swiper/img1.jpeg },{ name: 工具3, icon: /static/image/swiper/img1.jpeg },{ name: 工具4, icon: /static/image/swiper/img1.jpeg },{ name: 工具5, icon: /static/image/swiper/img1.jpeg },{ name: 工具5, icon: /static/image/swiper/img1.jpeg },{ name: 工具5, icon: /static/image/swiper/img1.jpeg },]}}
}
/script3. 样式设置
接下来是样式的编写这一步会影响整个工具栏的展示效果。我们为工具栏、轮播图和卡片分别设置样式特别是 scroll-view 和 tool-item 这些关键元素。
style
.container {font-size: 14px;line-height: 24px;background-color: #f5f5f5;padding-bottom: 60px; /* 留出底部导航栏的位置 */
}/* 轮播图样式 */
.swiper {height: 150px;margin-bottom: 20px;border-radius: 10px;overflow: hidden;margin: 0 10px;
}
.swiper-item {height: 150px;width: 100%;background-color: #ff5e62;
}
.swiper-image {width: 100%;
}/* 横向滑动工具栏样式 */
.tool-bar {display: flex;flex-direction: row;padding: 10px;border-radius: 10px;margin: 15px 10px 0px 10px;background-color: #ffffff;overflow-x: auto; /* 允许水平滚动 */white-space: nowrap;width: 100%;
}
.tool-item {width: 80px;margin-right: 10px;text-align: center;display: flex;flex-direction: column; /* 垂直排列图标和文字 */align-items: center;
}
.tool-icon {width: 50px;height: 50px;border-radius: 10px;margin-bottom: 5px;
}
.tool-text {font-size: 12px;color: #333;
}
/styletool-bar 是整个工具栏的容器我们设置了 flex-direction 为 row表示工具项在水平排列。tool-item 中我们设置了 flex-direction 为 column让图标和文字垂直排列。scroll-view 本身设置了 overflow-x: auto使其可以横向滚动。
4. 工具栏的细节优化
现在我们已经有了一个基本的横向工具栏但为了让它更具吸引力我们可以进行一些样式优化使其更美观并且适配更多的场景。接下来会从样式细节、布局调整和一些动态效果出发进一步美化这个工具栏。
4.1 增加圆角、阴影和过渡效果
圆角、阴影和过渡效果可以让工具栏看起来更加立体给用户更好的视觉体验。我们可以在 .tool-item 和 .tool-icon 上增加这些效果。
.tool-bar {display: flex;flex-direction: row;padding: 10px;border-radius: 10px;margin: 15px 10px 0px 10px;background-color: #ffffff;overflow-x: auto;white-space: nowrap;width: 100%;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}.tool-item {width: 80px;margin-right: 10px;text-align: center;display: flex;flex-direction: column;align-items: center;border-radius: 8px; /* 圆角 */transition: transform 0.2s ease; /* 添加过渡效果 */
}.tool-item:hover {transform: scale(1.1); /* 鼠标悬浮放大效果 */
}.tool-icon {width: 50px;height: 50px;border-radius: 50%; /* 图标改为圆形 */margin-bottom: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 图标阴影 */
}4.2 动态效果
这里我们给 .tool-item 添加了 :hover 样式在鼠标悬浮时稍微放大图标形成一种“弹出”的效果。同时tool-icon 的阴影让图标看起来不再是“贴”在页面上的而是有了一些立体感。
4.3 文本颜色和字体
为了让工具栏的文字更具可读性可以使用更亮眼的颜色和稍大的字体。也可以给文字加上一点渐变效果。
.tool-text {font-size: 14px;color: #333;font-weight: bold; /* 加粗字体 */background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 渐变颜色 */-webkit-background-clip: text;color: transparent;
}5. 响应式布局的实现
在开发移动应用时响应式设计尤为重要尤其是在横向滚动工具栏这种组件上。我们希望无论屏幕尺寸如何变化工具栏的内容都能自适应调整不会出现溢出或内容过小的问题。
5.1 使用 vw 和 vh 单位
vw视口宽度和 vh视口高度是 CSS 中非常实用的单位可以使组件根据屏幕尺寸自动缩放。我们可以用 vw 来控制工具栏宽度使其适应不同屏幕。
.tool-item {width: 20vw; /* 每个工具项的宽度占屏幕宽度的20% */max-width: 100px; /* 最大宽度设置 */
}这种设置让每个工具项的宽度根据屏幕的宽度动态调整但不超过 100px这样就能适配各种设备。
5.2 媒体查询
如果想让工具栏在不同屏幕尺寸下的显示效果更加精细可以使用 CSS 的媒体查询功能在不同的屏幕宽度下调整工具栏的布局。
media screen and (max-width: 600px) {.tool-item {width: 30vw; /* 在小屏幕上每个工具项占30%屏幕宽度 */}
}media screen and (min-width: 600px) {.tool-item {width: 15vw; /* 在大屏幕上每个工具项占15%屏幕宽度 */}
}通过这种方式我们可以确保在屏幕较小的手机上工具项不会因为太小而难以阅读在屏幕较大的设备上工具栏也不会显得拥挤。 6. 交互功能的实现
光有好看的外观还不够我们可以为工具栏添加一些交互功能使用户体验更好。例如当用户点击某个工具项时可以触发相应的页面跳转或显示详细信息。
6.1 点击事件
在 UniApp 中可以直接为工具项绑定点击事件。在模板中的 view 标签上使用 click 事件并在 methods 中定义点击处理逻辑。
view classtool-item v-for(tool, index) in tools :keyindex clickhandleToolClick(tool)image :srctool.icon classtool-icon/imagetext classtool-text{{ tool.name }}/text
/viewmethods: {handleToolClick(tool) {// 根据工具名称执行相应的操作可以跳转到不同页面或展示内容uni.showToast({title: 点击了${tool.name},icon: none});}
}这样用户点击某个工具项时会显示提示信息。当然你也可以根据需求进行页面跳转或执行其他操作比如跳转到工具的详情页面
uni.navigateTo({url: /pages/${tool.pageName}/${tool.pageName}
});6.2 让工具栏记住滚动位置
如果希望工具栏在页面切换后能记住用户滚动的位置可以利用 scroll-left 属性记录和恢复滚动位置。
scroll-view scroll-xtrue classtool-bar :scroll-leftscrollLeft!-- 工具项 --
/scroll-viewdata() {return {scrollLeft: 0, // 滚动位置};
},
methods: {// 页面离开时记录滚动位置saveScrollPosition(event) {this.scrollLeft event.detail.scrollLeft;}
}7. 优化性能
在移动端性能优化是一个大话题特别是在像工具栏这种涉及滚动和图片渲染的地方。以下是一些常见的优化措施
7.1 图片懒加载
如果工具栏里有很多图片可以启用懒加载减少初始加载时间。UniApp 提供了 lazy-load 属性可以在 image 标签中设置。
image :srctool.icon classtool-icon lazy-loadtrue/image这样只有当图片即将出现在视口中时才会加载避免一次性加载所有图片节省资源。
7.2 减少渲染次数
对于动态数据的渲染可以在页面初次加载时将数据保存到本地存储中避免每次打开页面都重新获取数据。例如如果工具栏内容来自接口可以将结果缓存起来
methods: {async fetchTools() {const cachedTools uni.getStorageSync(tools);if (cachedTools) {this.tools cachedTools;} else {const res await uni.request({ url: API_URL });this.tools res.data;uni.setStorageSync(tools, this.tools);}}
}8. 最终效果展示与总结
经过上述步骤我们的 UniApp 横向工具栏已经实现得差不多了。这个工具栏具有以下特点
支持横向滚动使用 scroll-view 实现。使用 flex 布局将图标和文字垂直排列并添加了悬浮效果。自适应布局确保在各种屏幕尺寸上都能良好展示。点击事件处理可以轻松跳转或展示信息。性能优化通过图片懒加载和本地缓存提高了加载速度。 总结
本文介绍了如何在 UniApp 中制作一个横向滚动工具栏从基础实现到样式优化再到响应式设计和交互添加最后进行了性能优化。希望这篇文章能帮助大家更好地理解和掌握 UniApp 中横向工具栏的实现方法并能在自己的项目中自由运用。
通过这种方式实现的工具栏不仅美观还具有实用性可以轻松满足大多数项目需求。祝大家在开发 UniApp 的旅程中一帆风顺
