微信小程序实现轮播图(适配机型)

 更新时间:2022年06月24日 10:23:38   作者:Vue酱  
这篇文章主要为大家详细介绍了微信小程序实现轮播图,适配机型,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现轮播图的具体代码,供大家参考,具体内容如下

1、wxss样式:

/* 页面显示图片的框 */
.showTableBox {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

/* img图片所在的父元素盒子,有几张img,width就设置百分之几百 */
.slideshowImgBox {
    position: absolute;
    z-index: 1;
    width: 500%;
    height: 100%;
}

/* img width设置为: 100% / 图片总数 的百分比 */
.slideshowImgBox image {
    width: 20%;
    height: 100%;
    float: left;
}
/* 下方小圆点样式*/
.circleBox {
    width: 100%;
    position: absolute;
    bottom: 10px;
    justify-content: center;
}

.circle {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #F5F5F5;
    margin: 0 5px;
    z-index: 999;
}

.circleActive {
    background-color: #BF360C;
}

其实到这里适配就完成啦,下面是怎么手写一个轮播图哈哈

2、js代码:

page({
  data: {
        leftNum: 0,//type为number的偏移量,方便计算
        imgLeft: "0", //偏移量,
        screenWidth: 0, //屏幕width
        changCircleIndex: 0, //对应圆球的下标,css根据页面下标显示对应class
        slideshowImgs: ["../images/beiJing.jpg", "../images/chengDu.jpg",
            "../images/shangHai.jpg", "../images/chongQing.jpg", "../images/beiJing.jpg"
        ],
},
 onLoad: function (options) {
        this.setData({
            screenWidth: wx.getSystemInfoSync().windowWidth //获取屏幕宽度
        })
        this.imageCarousel()
    },

    imageCarousel: function () {
        let imgOverallWidth = this.data.screenWidth * (this.data.slideshowImgs.length - 1)
        let timer = setInterval(() => {
            this.data.imgLeft = `${this.data.leftNum -= this.data.screenWidth}px`
            this.setData({
                imgLeft: this.data.imgLeft,
                changCircleIndex: -(this.data.leftNum / this.data.screenWidth)
            })
            if (this.data.leftNum === -imgOverallWidth) {
                this.setData({
                    changCircleIndex: 0,
                    leftNum: 0,
                    imgLeft: `${this.data.leftNum}px`
                })
            }
        }, 3000)
    },
})

3、wxml代码:

<view class="photo">
    <view class="photoFixedBox">
        <view class="showTableBox">
            <view class="slideshowImgBox" style="left:{{imgLeft}};">
<!--这里列表渲染的图片一共五张,第一张和最后一张是同一张图,防止轮播时出现白屏 -->
                <image wx:for="{{slideshowImgs}}" src="{{item}}"></image>
            </view>
            <view class="circleBox flex">
        <!-- {{changCircleIndex === index ? 'circleActive' : ''}}"是动态class,根据index来改变圆点颜色  -->
                <view wx:for="{{slideshowImgs.length-1}}" class="circle {{changCircleIndex === index ? 'circleActive' : ''}}"></view>
            </view>
        </view>
        <view class="photoClassifyBigBOx">
            <view class="imgClassifyBox flex"  wx:for="{{imgClassify}}"><text>{{item}}</text></view>
        </view>
    </view>
</view>

以上就是整个轮播图的实现啦,圆点的变色显示index根据图片left的偏移量距离来计算:偏移量 / 显示框的宽度,
其实微信小程序有swiper组件,使用也是很方便的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法

    layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法

    今天小编就为大家分享一篇layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 无废话JavaScript教程(全集)

    无废话JavaScript教程(全集)

    许多读者认为我那本《JavaScript语言精髓与编程实践》读来辛苦,所以我一直想写个简单的读本。索性,这次就写个最简单的吧。
    2008-10-10
  • php读取sqlite数据库入门实例代码

    php读取sqlite数据库入门实例代码

    本文介绍了php读取sqlite数据库的简单例子,php编程中操作sqlite入门实例,有需要的朋友可以参考下
    2014-06-06
  • JavaScript判断一个URL链接是否有效的实现方法

    JavaScript判断一个URL链接是否有效的实现方法

    如何用javascript来判断请求的url/链接有效(可连接,可用)?需要的朋友可以参考下。
    2011-10-10
  • 微信小程序实现日历打卡

    微信小程序实现日历打卡

    这篇文章主要为大家详细介绍了微信小程序实现日历打卡,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 微信小程序实现底部弹出模态框

    微信小程序实现底部弹出模态框

    这篇文章主要为大家详细介绍了微信小程序实现底部弹出模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js验证上传图片的方法

    js验证上传图片的方法

    这篇文章主要介绍了js验证上传图片的方法,可对上传图片的类型、大小等进行限制,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • 微信小程序顶部可滚动导航效果

    微信小程序顶部可滚动导航效果

    最近领导安排做一个小程序之做头部做导航分类效果,下面小编给大家分享实现代码,需要的朋友参考下吧
    2017-10-10
  • JS自定义右键菜单实现代码解析

    JS自定义右键菜单实现代码解析

    这篇文章主要介绍了JS自定义右键菜单实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • js的回调函数详解

    js的回调函数详解

    本文主要介绍了个人对于javascript中回调函数的理解和使用方法及示例,需要的朋友可以参考下
    2015-01-01

最新评论