微信小程序轮播图实现(超简单)「建议收藏」

微信小程序轮播图实现(超简单)「建议收藏」微信小程序轮播图实现(超简单)微信小程序的轮播图可以用官方给的swiper组件。下图是官方给出的swiper属性,我截取了比较常用的一些属性。效果实现如下图1.普通开发(不采用云开发)1.1wxml<viewclass=”banner”><swiperindicator-dotsindicator-color=”rgba(255,255,255,0.5)”indicator-active-color=”#fff”circularautoplay

大家好,又见面了,我是你们的朋友全栈君。

微信小程序轮播图实现(超简单)

微信小程序的轮播图可以用官方给的swiper组件。
下图是官方给出的swiper属性,我截取了比较常用的一些属性。
在这里插入图片描述
效果实现如下图
效果图

1. 普通开发(不采用云开发)

1.1wxml

<view class="banner">
   <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
   indicator-active-color="#fff" circular autoplay interval="4000">
   <swiper-item><image src="/image/1.jpg"></image></swiper-item>
   <swiper-item><image src="/image/2.jpg"></image></swiper-item>
   <swiper-item><image src="/image/3.jpg"></image></swiper-item>
   </swiper>
</view>

1.2wxss


.banner{ 
   
  width: 100%;
  height: 350rpx;
}
.banner swiper{ 
   
  height: 100%;
  width: 100%;
}
.banner image{ 
   
  width: 100%;
  height: 350rpx;
}

2. 采用云开发

2.1wxml

<view class="banner">
   <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
   indicator-active-color="#fff" circular autoplay interval="4000">
   <swiper-item wx:for="{ 
   {list}}">
     <image src="{ 
   {item.imge}}"></image>
    </swiper-item>
   </swiper>
</view>

2.2wxss

.banner{ 
   
  width: 100%;
  height: 400rpx;
}
.banner swiper{ 
   
  height: 100%;
  width: 100%;
}
.banner image{ 
   
  width: 100%;
  height: 400rpx;
}

2.3js

getTopList(){ 
   
  wx.cloud.database().collection('lunbo').get()
  .then(res => { 
   
    console.log("数据上传成功",res)
  this.setData ({ 
   
    list:res.data 
  })
})

自己赶紧试试吧,只需件swiper组件中写入image,将image中的src中的路径换成自己图片的路径就可以了,

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143250.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • 【博弈论】常见总结「建议收藏」

    【博弈论】常见总结「建议收藏」每次看到博弈论的题目就很脑阔疼平衡状态,又称作奇异局势。当面对这个局势时则会失败。任意非平衡态经过一次操作可以变为平衡态。先手能够在初始为非平衡的游戏中取胜,后手能够在初始为平衡的游戏中取胜。SG函数待补两个博客12来源12一、巴仕博弈(BashGame)1堆题目HDU1846有一堆物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取m个。最后取光…

    2022年10月15日
  • iOS实现多个可变cell复杂界面的制作

    iOS实现多个可变cell复杂界面的制作

  • 激光slam认知_激光slam的优缺点

    激光slam认知_激光slam的优缺点slam介绍什么是slam?SLAM(simultaneouslocalizationandmapping),也称为CML(ConcurrentMappingandLocalization),即时定位与地图构建,或并发建图与定位。问题可以描述为:将一个机器人放入未知环境中的未知位置,是否有办法让机器人一边逐步描绘出此环境完全的地图所谓完全的地图(aconsistent…

  • 计算机职称考试科目及内容,职称计算机考试科目

    计算机职称考试科目及内容,职称计算机考试科目全国职称计算机考试主要是测试参考人员在计算机与网络方面的基本应用能力,考试科目采取模块化设计,每一科目单独考试。1.中文WindowsXP操作系统  2.中文Windows98操作系统;  3.Word97中文字处理;  4.Word2003中文字处理  5.Excel97中文电子表格;  6.Excel2003中文电子表格  7.PowerPoint97中文演示文稿…

  • apache rewritecond_hfile数据格式中的data字段用于

    apache rewritecond_hfile数据格式中的data字段用于RewriteCond就像我们程序中的if语句一样,表示如果符合某个或某几个条件则执行RewriteCond下面紧邻的RewriteRule语句,这就是RewriteCond最原始、基础的功能,为了方便理解,下面来看看几个例子。复制代码代码如下:RewriteEngineonRewriteCond %{HTTP_USER_AGENT} ^Mozilla//5/.0.*

  • String转换Long两种方式

    Long.ValueOf(“String”)与Long.parseLong(“String”)的区别Long.ValueOf(“String”)返回Long包装类型Long.parseLong(“String”)返回long基本数据类型

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号