uni-app轮播图制作

简介: uni-app轮播图制作

Uni-app是一种跨平台开发框架,可以用来开发多个平台的应用程序。在Uni-app中,可以使用uni-swiper组件制作轮播图。

制作轮播图的步骤如下:

  1. 在pages文件夹中创建一个新页面,例如index.vue。
  2. 在index.vue中添加uni-swiper组件,如下所示:
<template>
  <view>
    <uni-swiper :indicator-dots="true" :autoplay="true">
      <uni-swiper-item>
        <image src="../../static/imgs/img1.jpg"></image>
      </uni-swiper-item>
      <uni-swiper-item>
        <image src="../../static/imgs/img2.jpg"></image>
      </uni-swiper-item>
      <uni-swiper-item>
        <image src="../../static/imgs/img3.jpg"></image>
      </uni-swiper-item>
    </uni-swiper>
  </view>
</template>
  1. 在static文件夹中添加轮播图使用的图片。
  2. 在样式中设置uni-swiper的高度和宽度,如下所示:
uni-swiper {
  height: 200px;
  width: 100%;
}
  1. 运行程序,即可看到制作完成的轮播图。

需要注意的是,uni-swiper组件支持的属性和事件有很多,可以根据需要进行设置。

相关文章
|
存储 小程序 API
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
|
前端开发 JavaScript
Vue3.0项目——打造企业级音乐App(一)Tab栏、轮播图、歌单列表、滚动组件
Vue3.0项目——打造企业级音乐App(一)Tab栏、轮播图、歌单列表、滚动组件
326 0
|
小程序 Shell API
【小程序项目开发-- 京东商城】uni-app开发之轮播图
【小程序项目开发-- 京东商城】uni-app开发之轮播图
【小程序项目开发-- 京东商城】uni-app开发之轮播图
|
1月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
385 139
|
1月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
290 137
|
2月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
130 0
|
30天前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
196 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
233 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
505 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡