【uniapp】轮播图

前言

Uniapp的swiper组件是一个滑块视图容器组件，可以在其中放置多个轮播图或滑动卡片。它是基于微信小程序的swiper组件进行封装，可以在不同的平台上使用，如微信小程序、H5、App等。

效果图

前端代码

swiper组件

<template>
  <view class="banner-content">
    <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="300" :circular="true" @change="swiperChange">
      <block v-for="(item, index) in bannerList" :key="index">
        <swiper-item>
<a :href="item.jump_path" target="_blank">
<image :src="item.image" mode="aspectFill" class="banner-image"></image>
</a>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
bannerList: [],
};
},
onLoad() {
this.getBanner()
},
methods: {
// 轮播图数据
getBanner(){
axios.get('http://demo2.com/api/index/banner')// 替换成自己的接口
.then(response => {
this.bannerList = response.data.data;
})
},
}
};
</script>
<style>
.banner-content {
  width: 100%;
  height: 300px;
}
.banner {
  width: 100%;
  height: 100%;
  margin: auto;
}
.banner-image {
  width: 100%;
  height: 100%;
}
</style>

数据库

CREATE TABLE `banner` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '名称',
  `jump_path` varchar(100) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '跳转路径',
  `image` varchar(200) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '图片',
  `weigh` int(10) DEFAULT '0' COMMENT '权重',
  `status` tinyint(1) DEFAULT '1' COMMENT '是否显示:1=是,0=否',
  `create_time` bigint(16) DEFAULT '0' COMMENT '创建时间',
  `update_time` bigint(16) DEFAULT '0' COMMENT '修改时间',
  PRIMARY KEY (`id`)
)

接口（PHP）

public function banner(): void
{
    $data = Db::name('banner')->where(['status'=>1])
        ->order(['weigh'=>'desc'])
        ->field(['id','name','jump_path','image'])
        ->select()
        ->toArray();
    foreach ($data as $k => $v){
        $data[$k]['image'] = getFilePath($v['image']);
    }
    $this->success('成功', $data);
}

getFilePath获取文件完整路径

原文地址：https://blog.csdn.net/zkxiaoxiangzhu/article/details/144107620

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！