微信小程序轮播图的制作与跳转

?
1
2
3
4
5
6
7
8
9
10
11
  <!--轮播图 -->
  <view class='swiperBanner'>
    <swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' circular='{{circular}}'>
      <swiper-item  wx:for="{{imgUrls}}" wx:key='{{index}}'>
        <navigator url='{{item.link}}'>
          <image src="{{item.url}}" class="slide-image" mode="aspectFill"></image>
        </navigator> 
      </swiper-item>
    </swiper>
  </view>
</view>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 轮播 */
.swiperBanner{
  width:100%;
  height:420rpx !important;
  margin:0 auto; 
}
.swiperBanner image{
  width:100%;
  height:420rpx !important;
}
swiper {
  width:100%;
  height:420rpx !important;
}

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
indicatorDots:false,
   autoplay:true,
   interval:3000,
   duration: 800,
   circular:true,
    // 轮播图
   imgUrls: [
     {
       link:'../activity/washCar1/index/index',
       url:'https://ttcf.cheleu.com/static/ttcf/img/banner8.png',
 
     },
     {
       link: '../activity/Odysseus/index/index',
       url: 'https://ttcf.cheleu.com/static/ttcf/img/banner9.png',
 
     },
     // "https://ttcf.cheleu.com/static/ttcf/img/banner8.png",
     // "https://ttcf.cheleu.com/static/ttcf/img/banner9.png",
 
   ],

　　

posted @   新恒  阅读(6295)  评论(1)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 张高兴的大模型开发实战：（一）使用 Selenium 进行网页爬虫
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
SQL AI 助手