工作室网站域名,装饰工程包括哪些项目,网站建设和推广大概需要多少费用,北京网络营销推广外包前言
Uniapp的swiper组件是一个滑块视图容器组件#xff0c;可以在其中放置多个轮播图或滑动卡片。它是基于微信小程序的swiper组件进行封装#xff0c;可以在不同的平台上使用#xff0c;如微信小程序、H5、App等。
效果图 前端代码
swiper组件
templatevi…前言
Uniapp的swiper组件是一个滑块视图容器组件可以在其中放置多个轮播图或滑动卡片。它是基于微信小程序的swiper组件进行封装可以在不同的平台上使用如微信小程序、H5、App等。
效果图 前端代码
swiper组件
templateview classbanner-contentswiper classbanner :indicator-dotstrue :autoplaytrue :interval2000 :duration300 :circulartrue changeswiperChangeblock v-for(item, index) in bannerList :keyindexswiper-itema :hrefitem.jump_path target_blankimage :srcitem.image modeaspectFill classbanner-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([status1])-order([weighdesc])-field([id,name,jump_path,image])-select()-toArray();foreach ($data as $k $v){$data[$k][image] getFilePath($v[image]);}$this-success(成功, $data);
}
getFilePath获取文件完整路径
