zoukankan      html  css  js  c++  java
  • 小程序轮播图部分

    轮播图

    <view class="swiper-container">
        <swiper   autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange" current="{{swiperCurrent}}" style="height:{{imgheights[swiperCurrent]}}rpx;">
            <block wx:for="{{imgUrls}}">
                <swiper-item>
                    <image src="{{item.image}}" class="slide-image" mode="widthFix" bindtap="bannerjump" data-url="{{item}}" bindload="imageLoad"  style="height:{{imgheights[swiperCurrent]}}rpx;{{imgwidth}}rpx;"/>
                </swiper-item>
            </block>
        </swiper>
        <view class="dots">  
            <block wx:for="{{imgUrls}}" wx:key="unique">  
              <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>  
            </block>  
        </view>
    </view>
    autoplay: false,
    interval: 2000,
    duration: 300,
    swiperCurrent: 0
     getbanner: function() {
            var that = this;
            // 初始化或清空数组
            that.setData({
                imgUrls: [],
                isLoading: false,
                loadText: '数据加载中'
            })
            wx.request({
                url: 'https://try.fishqc.com/getBannerInfo', //请求接口地址
                header: {
                    'content-type': 'application/json' // 默认值
                },
                data:{
                    location:3
                },
                success: function(res) {
                    that.setData({
                        isLoading: true,
                        loadText: '数据加载中',
                        imgUrls: res.data.data
    
                    })
                }
            })
        },
     imageLoad: function (e) {  
        //获取图片真实宽度  
            var imgwidth = e.detail.width,  
              imgheight = e.detail.height,  
              //宽高比  
              ratio = imgwidth / imgheight;  
            // console.log(imgwidth, imgheight)  
            //计算的高度值  
            var viewHeight = 750 / ratio;  
            var imgheight = viewHeight  
            var imgheights = this.data.imgheights  
            //把每一张图片的高度记录到数组里  
            imgheights.push(imgheight)  
           
            this.setData({  
              imgheights: imgheights,  
            }) 
        },
     swiperChange: function(e){  
            this.setData({  
                swiperCurrent: e.detail.current  
            })  
        },
  • 相关阅读:
    你做的页面有哪些浏览器测试过?这些浏览器的内核分别是什么?
    响应式布局
    Promise(二)
    Promise(一)
    同步和异步的自我理解
    null 与 undefined 区别
    python pandas 数据处理
    【python】list、tuple、dict、set、dataframe、narray、series之间的区别
    时间序列常用模型
    Linux系统学习笔记
  • 原文地址:https://www.cnblogs.com/antyhouse/p/9358691.html
Copyright © 2011-2022 走看看