uniapp 3分钟集成轮播广告图

 先上结果图

           

顶部广告栏为 移动app常见需求，本日主要演示如何快速实现.这里照旧基于 《星云erp-移动版》演示版
（自行下载 导入 Hbuilder, 后端接口可以直接使用我演示接口，不需要修改）
第一步: 组件选择
我们直接使用uni-swiper-dot 组件，具体先容见官方：uni-app官网
注意事项

• uni-swiper-dot组件依靠 swiper 组件,请与swiper组件共同使用
  
• width 与 height 如非须要，请勿设置过大，或者过小
  
• swiper-item 尽量控制在一定命量之内，否则指示点大概会超出屏幕
  
• 暂不支持垂直方向的指示点
  

第二步 ： （以首页整合为例）
 文件在pages的根目次下

在<view class="mine-container">下添加uni-swiper-dot代码

2.                 <!-- 轮播图 -->
3.                 <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
4.                         <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
5.                                 <swiper-item v-for="(item, index) in data" :key="index">
6.                                         <view class="swiper-item" @click="clickBannerItem(item)">
7.                                                 <image :src="item.image" mode="aspectFill" :draggable="false" />
8.                                         </view>
9.                                 </swiper-item>
10.                         </swiper>
11.                 </uni-swiper-dot>

复制代码

第三步: 在data中定义相关图片数据

1. data: [{
2.                                                 image: 'http://xy.wecando21cn.com/static/images/banner/banner01.jpg'
3.                                         },
4.                                         {
5.                                                 image: 'http://xy.wecando21cn.com/static/images/banner/banner02.jpg'
6.                                         },
7.                                         {
8.                                                 image: 'http://xy.wecando21cn.com/static/images/banner/banner03.jpg'
9.                                         }
10.                                 ],

复制代码

第四步：在methods中添加对应js方法，这里我只是做了切换 方法，其他可以参考官方

1. changeSwiper(e) {
2.                                 this.current = e.detail.current
3.                         },

复制代码

第五步，对应样式

1. /* #ifdef H5 */
2.         @media screen and (min-width: 768px) and (max-width: 1425px) {
3.                 .swiper {
4.                         height: 630px;
5.                 }
6.         }
8.         @media screen and (min-width: 1425px) {
9.                 .swiper {
10.                         height: 830px;
11.                 }
12.         }
14.         /* #endif */
16.         .title {
17.                 font-size: 16rpx;
18.                 color: #8f8f94;
19.         }
21.         /*以下为轮播图样式*/
22.         .uni-margin-wrap {
23.                 width: 690rpx;
24.                 width: 100%;
25.                 ;
26.         }
28.         .swiper {
29.                 height: 300rpx;
30.         }
32.         .swiper-box {
33.                 height: 150px;
34.         }
36.         .swiper-item {
37.                 /* #ifndef APP-NVUE */
38.                 display: flex;
39.                 /* #endif */
40.                 flex-direction: column;
41.                 justify-content: center;
42.                 align-items: center;
43.                 color: #fff;
44.                 height: 300rpx;
45.                 line-height: 300rpx;
46.         }
48.         @media screen and (min-width: 500px) {
49.                 .uni-swiper-dot-box {
50.                         width: 400px;
51.                         /* #ifndef APP-NVUE */
52.                         margin: 0 auto;
53.                         /* #endif */
54.                         margin-top: 8px;
55.                 }
57.                 .image {
58.                         width: 100%;
59.                 }
60.         }

复制代码

到这里 一个如结果图的轮播广告已经集成完成。
完整代码见 下载的  《星云erp-移动版》

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。