当前位置: 首页 > news >正文

微信小程序,基于uni-app的轮播图制作,调用文件中图片

以便捷为目的,想使用文件中的图片制作轮播图

但网上找到的都是轮播图彼此分割,没有使用数组存储在一起,不便于管理,代码不美观简洁

作者使用文件中的图片,并使用数组制作轮播图的具体操作如下:(任一页面的.vue文件,完整简洁代码)

<template><swiper><swiper-item v-for = "item in picture" :key="item.id"><view><image :src = "item.img"></image></view></swiper-item></swiper>
</template><script>export default {data() {return {title: 'Hello uni',//轮播图数据picture : [{ id: '1', img: "/static/tabs/home_default.png"},{ id: '2', img: "/static/tabs/home_selected.png"}]}},onLoad() {},methods: {}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>

相关文章:

  • 加里·基尔代尔:CP/M之父与个人计算时代的先驱
  • 线程池(六):ThreadLocal相关知识详解
  • 移除元素(简单)
  • 游戏引擎学习第246天:将 Worker 上下文移到主线程创建
  • C语言中结构体的字节对齐的应用
  • WPF与C++ 动态库交互
  • 【网络安全】用 Linux 命令行 CLI 日志文件处理指南
  • 在springboot项目中,如何进行excel表格的导入导出功能?
  • 从OpenAI收购实时数据引擎揭示AI数据库进化方向
  • django之优化分页功能(利用参数共存及封装来实现)
  • 【Linux】Centos7 安装 Docker 详细教程
  • 5.3/Q1,GBD数据库最新文章解读
  • MySQL多查询条件下深度分页性能优化技巧及示例总结
  • 【Castle-X机器人】一、模块安装与调试:机器人底盘
  • JavaScript 笔记 --- part6 --- JS进阶 (part1)
  • 高性能电脑系统优化工具Advanced SystemCare PRO v18.3.0.240 解锁永久专业版
  • 华为云loT物联网介绍与使用
  • 【Castle-X机器人】五、物联网模块配置与调试
  • 4.26学习——web刷题
  • Vue3中AbortController取消请求的用法详解
  • 中公教育薪酬透视:董监高合计涨薪122万,员工精简近三成
  • 马上评丨学生举报食堂饭菜有蛆,教育局应该护谁的犊子
  • 宣称防老年痴呆的“原装进口”保健品McPee被指涉假,未获澳方销售批准
  • 特朗普承认“24小时结束俄乌冲突”是玩笑:大家都知道
  • 邮轮、无人机、水上运动……上海多区推动文旅商体展融合发展
  • 我国首次实现地月距离尺度卫星激光测距