微信小程序中实现轮播图效果

这篇具有很好参考价值的文章主要介绍了微信小程序中实现轮播图效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、swiper视图容器组件

swiper是轮播图的外层容器,所以使用轮播图就必须使用到swiper标签。

二、swiper相关属性

微信小程序中实现轮播图效果

存在默认样式:
1 width 100%
2 height 150px

三、swiper-item轮播项

只能放置在swiper组件中。表示每一个轮播项。

四、代码实现

<!-- index.wxml代码如下 -->
<view>
  <swiper interval="1000" indicator-dots="true" autoplay="true" circular="true">
    <swiper-item>
      <image mode="widthFix" src="https://img-blog.yssmx.com/5589ae9720df44fda0967faaa288a553.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
    </swiper-item>
    <swiper-item class="cri"> 
      <image mode="widthFix" src="https://img-blog.yssmx.com/5580029c6bed471487fe93983088cbae.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
    </swiper-item>
      <swiper-item>
        <image mode="widthFix" src="https://img-blog.yssmx.com/1472745c740d42caa002fb5b24b0069a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
      </swiper-item>
  </swiper>
</view>

编译效果:
微信小程序中实现轮播图效果

五、注意事项

当切换机型后,就可以方向,图片的宽高与效果不一样
微信小程序中实现轮播图效果

1.分析和升级版本,解决换机型的宽高问题

①先找出 原图片的宽度和高度 ,我这里的原图宽高是491*327
②等比例 给swiper 定 宽度和高度
swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
由上面可以推出:
swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
即 swiper 高度 = calc(100vw * 327 / 491)
③需要知道的是:css中vm是视口单位,1vw=视口宽度的百分之一,而swiper 宽度的默认是100%,即相当于100vm
所以只需要在相对应的wcss中加入如下样式即可

swiper {
  width: 100%;
  height: calc(100vw * 327 /  491);
}
image {
  width: 100%;
}

此时编译再观察效果,任何机型都能达到预期效果啦
微信小程序中实现轮播图效果

六、写在最后

以上是自己在学习中的一点小总结,如有出错的地方,欢迎读者朋友们批评指正。
微信小程序中实现轮播图效果文章来源地址https://www.toymoban.com/news/detail-501945.html

到了这里,关于微信小程序中实现轮播图效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序02-轮播图实现与图片点击跳转

    在小程序01中,已经学习了如何制作底部导航栏,本节让我们一起学习如何制作轮播图,以及点击轮播图完成页面跳转。 注:(1)前期学习,我这里用的本地的图片,后期的话,会对接后端接口,动态获取数据,前期方便学习,就暂时用的本地图片。(2)关于图片跳转地址

    2024年02月16日
    浏览(80)
  • 解决微信小程序swiper轮播图撑不满有留白 实现swiper轮播图撑满父容器

    问题 :如下图,swiper轮播图两侧会有留白,没有撑满swiper 失败的尝试 : 1.调整图片尺寸 2.设属性设置image的mode为scaleToFill 3.设置item的属性 都没能实现将图片填充满轮播图,图片会有右侧和底部两块留白 通过调试器查看到image区域很小,怀疑是image本身属性的问题 随后尝试在

    2024年04月25日
    浏览(55)
  • 微信小程序 轮播图代码

    微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码: 然后,在小程序的 js 文件中,添加如下代码: 这样就可以在小程序中使用轮播图了。 注意: imgUrls 中存储的是图片的 URL 地址,可以将自己的图片地址替换进去。 indicatorDots 表示是否显示面板指

    2024年02月09日
    浏览(38)
  • 微信小程序的轮播图

    当然,我可以为你提供一个简单的微信小程序轮播图的示例代码。以下是一个基本的轮播图组件的实现方式: 1. 在小程序的页面文件中,添加轮播图组件的相关代码:   2. 在页面的脚本文件中,定义轮播图组件的相关属性和方法:   3. 在页面的样式文件中,定义轮播图组件

    2024年04月15日
    浏览(52)
  • 微信小程序九宫格布局,轮播图

    在微信小程序中,可以使用 view 标签来实现九宫格布局。具体步骤如下: 在wxml文件中,使用 lt;view 标签设置一个容器。例如: 使用CSS样式来设置 grid-container 类的样式,使其成为九宫格布局。例如: 在 view 标签中放置具体内容。例如,线上教育小程序的九宫格布局页面代码

    2024年01月16日
    浏览(57)
  • 微信小程序轮播图swiper使用

    文章目录 一、swiper的作用? 二、使用步骤 1.引入库 2.读入数据 总结 小程序中创建轮播图。 微信开放文档中组件--》视图容器--》swiper将下面代码拷贝   将代码粘贴至需要轮播图的页面,并根据实际情况修改代码 这里的tabList和img是根据接口传来的数据,需要在js中定义,这

    2024年02月12日
    浏览(46)
  • uni-app小程序折叠3D轮播图效果实现。

    先来看效果图 实现原理: 通过小程序的触摸事件,来控制图片数组的变化实现动态样式;来改变图片的样式。 贴上轮播组件完整代码 组件使用 如果有自动轮播的需求,可以改造下组件加个定时器处理数组就OK了。

    2024年02月11日
    浏览(43)
  • 微信小程序-轮播图-九宫格布局--【开发实战(第2版)】

    微信目录集链接在此: 详细解析黑马微信小程序视频–【思维导图知识范围】 难度★✰✰✰✰ 微信小程序开发实战(第2版)入门–【开发实战(第2版)】 ★★✰✰✰ 不会导入/打开小程序的看这里:参考 微信小程序开发实战(第2版)入门–【开发实战(第2版)】 用免费

    2024年02月08日
    浏览(42)
  • 微信小程序进阶——Flex弹性布局&轮播图&会议OA项目(首页)

    目录 一、Flex弹性布局 1.1 什么是Flex弹性布局 1.1.1 详解 1.1.2 图解  1.1.3 代码演示效果 1.2 Flex弹性布局的核心概念 1.3 Flex 弹性布局的常见属性 1.4 Flex弹性布局部分属性详解 1.4.1 flex-direction属性 1.4.2 flex-wrap属性 1.4.3 flex-flow属性 1.4.4 justify-content属性 1.4.5 align-items属性 1.4.6 

    2024年02月05日
    浏览(41)
  • 微信小程序(原生)——轮播图swiper、1秒切换、自动轮播、无缝切换

    微信小程序的轮播图制作,且图片不变形。1秒切换、自动轮播、无缝切换 index.wxml文件: index.wxss文件: 完整示意图 swiper网址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html image网址:https://developers.weixin.qq.com/miniprogram/dev/component/image.html 图片处理方面: mode=\\\"aspectFi

    2024年02月15日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包