微信小程序(原生)——轮播图swiper、1秒切换、自动轮播、无缝切换

这篇具有很好参考价值的文章主要介绍了微信小程序(原生)——轮播图swiper、1秒切换、自动轮播、无缝切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、简介

微信小程序的轮播图制作,且图片不变形。1秒切换、自动轮播、无缝切换

二、案例演示

小程序轮播图片不变形,微信小程序,微信小程序,小程序

三、案例代码

index.wxml文件:

 <!-- 轮播图区域 -->
  <swiper class="swiper-container" indicator-dots indicator-color="#fff" autoplay interval="3000" circular>
    <!-- 轮播项 -->
    <swiper-item>
      <view class="item">
        <image src="../img/1.jpg" mode="aspectFill"></image>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="item">
        <image src="../img/2.jpeg" mode="aspectFill"></image>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="item">
        <image src="../img/3.jpg"  mode="aspectFill"></image>
      </view>
    </swiper-item>
  </swiper>

index.wxss文件:

/**index.wxss**/
.swiper-container{
  width: 100%;
}
.item{
  height: 150px;
}
.item image{
  width: 100%;
  height: 100%;
}

完整示意图

小程序轮播图片不变形,微信小程序,微信小程序,小程序

四、代码2

data: {
	 banners: [{
	            'src': '../../images/1.jpeg'
	        },
	        {
	            'src': '../../images/2.jpeg'
	        },
	        {
	            'src': '../../images/3.jpg'
	        },
	        {
	            'src': '../../images/4.jpg'
	        },
	        {
	            'src': '../../images/5.jpeg'
	        }],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500,
    circular: true
},
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"	circular="{{circular}}">
    <block wx:for="{{banners}}" wx:key="*this">
        <swiper-item><image src="{{item.src}}" mode="aspectFill"></image></swiper-item>
    </block>
</swiper>

五、总结

swiper网址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
image网址:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
图片处理方面:mode="aspectFill"用的比较多, 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。文章来源地址https://www.toymoban.com/news/detail-618589.html

到了这里,关于微信小程序(原生)——轮播图swiper、1秒切换、自动轮播、无缝切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 基于html+js实现轮播图(自动轮播、左右按钮、小圆点点击及切换图片)

    使用html和js实现的一个简单小练习轮播图。大概功能主要是: 1、使用时间函数自动切换图片; 2、在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型,让鼠标移入,图片暂停,移出,图片恢复轮播; 3、在按钮的父节点身上绑定事件代理,事

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

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

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

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

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

    实现如图所示轮播图,具体编写步骤及原代码请见下方 编写 index.wxml 编写index.wxss 编写 index.js

    2024年02月07日
    浏览(50)
  • 微信小程序九宫格布局,轮播图

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

    2024年01月16日
    浏览(59)
  • 微信小程序中实现轮播图效果

    swiper是轮播图的外层容器,所以使用轮播图就必须使用到swiper标签。 存在默认样式: 1 width 100% 2 height 150px 只能放置在swiper组件中。表示每一个轮播项。 编译效果: 当切换机型后,就可以方向,图片的宽高与效果不一样 1.分析和升级版本,解决换机型的宽高问题 ①先找出

    2024年02月11日
    浏览(57)
  • 原生JS轮播图+自动播放+按钮切换+鼠标经过暂停+底部圆点切换

    手搓一个原生的JS轮播图,HTML部分就随意写了一点,重点的逻辑还是在JS中,可以实现自动播放banner图片,还有按钮点击切换banner和底部小圆点,点击底部小圆点可以切换banner图等功能,先上个图吧,是不是很丰富`_`  先放 JS部分 的代码吧,主要用到了点击事件、定时器等技

    2024年02月06日
    浏览(55)
  • 小程序中轮播图u-swiper图片无法显示问题

    问题:uview官网中 指定的图片路径字段为image,完全按照uview写轮播图却无法正常显示。    解决方法:1.把image字段改成url字段 2.给u-swiper加上  keyName=\\\"image\\\" 最后找到了总结原因: npm下载的uview默认是2.0的最新版本,百度上的uview文档默认是1.0的文档,title也是一样的问题,所

    2024年02月11日
    浏览(55)
  • 微信小程序02-轮播图实现与图片点击跳转

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

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

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

    2024年02月08日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包