精华内容
下载资源
问答
  • 主要介绍了微信小程序实现Swiper轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序swiper轮播图中的图片自适应高度的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信小程序 swiper 轮播图 前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口。 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示。要把indicator-dots属性直接删掉。 下面进入...
  • 主要介绍了微信小程序 swiper组件轮播图详解及实例的相关资料,需要的朋友可以参考下
  • 小程序顶部总会看到滚动的通知栏,一般单条的都会用跑马灯去实现,但面对多条的内容,就需要用轮播去实现,轮播自然是swiper了,查了查,还真有vertical这个属性,swiper真好用。 效果 体验 代码 wxml ...
  • 微信小程序swiper,滑块视图容器,使用这个视图实现轮播图的效果。
  • 微信小程序 swiper 组件实现层叠轮播图,同时自定义指示点样式和图片描述信息
  • 主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要为大家详细介绍了微信小程序使用swiper组件实现层叠轮播图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 设置display flex后,swiper轮播图不显示 display 如果在app.wxss中使用也会导致轮播图不显示

    当设置display:flex后,图片不显示;

    解决方案:1. 可以直接删除display:flex

    当然如果display涉及到很多元素,显然删除是不理智的

    解决方案2:
         排查方案:打开调试器,将鼠标放置swiper元素上,可见swiper|0*150;
    说明width为0,如下方
    在这里插入图片描述
      可将swiper元素上,添加width,便可解决不显示问题。如下方图示
    添加图示

    展开全文
  • 主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 小程序中使用swiper 组件 ,实现轮播图高度自适应效果。 先上最终实现效果图    先看一下微信官方文档介绍 swiper 组件 https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html   ...

    小程序中使用swiper 组件 ,实现轮播图高度自适应效果。

    先上最终实现效果图  

     

    先看一下微信官方文档介绍  swiper 组件

    https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

     

    代码部分

    wxml:

    <view class='images'>
      <swiper class='detail-imgs' indicator-dots="{{true}}" autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}" bindchange='bindchange' style="height:{{imgheights[current]}}rpx;">
        <block wx:for="{{imgUrls}}">
          <swiper-item style="">
            <image src="{{item}}" class='image-view' style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;" bindload="imageLoad" data-src='{{item}}'></image>
          </swiper-item>
        </block>
      </swiper>
    </view>

    js:

    Page({
      data: {
        imgheights: [],
        current: 0,
        imgwidth: 750,
        imgUrls: [
          'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
          'https://img3.doubanio.com/view/photo/l/public/p2494946035.webp',
          'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
        ],
      },
      imageLoad: function (e) {
        //获取图片真实宽度
        var imgwidth = e.detail.width,
          imgheight = e.detail.height,
          src = [],
          //宽高比
          ratio = imgwidth / imgheight;
        console.log(e.target.dataset['src'])
        src.push(e.target.dataset['src'])
        console.log(src)
        //计算的高度值
        var viewHeight = 750 / ratio;
        var imgheight = viewHeight
        var imgheights = this.data.imgheights
        //把每一张图片的高度记录到数组里
        imgheights.push(imgheight)
        this.setData({
          imgheights: imgheights,
        })
      },
      bindchange: function (e) {
        this.setData({
          current: e.detail.current
        })
      },
    })

    思路是这样滴,,,在图片 加载时通过 bindload imageLoad  将每张图片的 宽高取出,计算好高度,存入数组。swiper 组件 通过bindchange 监听图片切换 将当前图片的在数组中的位置(swiper组件中的位置)赋值 current ,以此动态的改变 页面 图片和swiper的高度。。。   但是,无意中发现一个问题,imageLoad  中打印 图片的 src 发现 顺序有时和图片真实的顺序是不一致的,把大图放在数组前面,但是却是第三个第四个加载出来的。这就坑了,,导致加载出来计算的图片高度数组顺序和真实的不一致。bindload 获取的图片顺序不正确,不知道是不是因为图片资源大小的缘故,故加了一个参数,严谨一点。。如果接口提供的参数里返回了图片的原始宽高 也可以不用这么做。

    在imageLoad中打印 index 哇 果然 顺序是有误的。

     

    最终代码

    <view class='images'>
      <swiper class='detail-imgs' indicator-dots="{{true}}" autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}" bindchange='bindchange' style="height:{{imgheights[current]}}rpx;">
        <block wx:for="{{imgUrls}}" wx:key="{{index}}">
          <swiper-item style="">
            <image src="{{item}}" class='image-view' style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;" bindload="imageLoad" data-src='{{item}}' data-index='{{index}}'></image>
          </swiper-item>
        </block>
      </swiper>
    </view>

     

    Page({
      data: {
        imgheights: [],
        current: 0,
        imgwidth: 750,
        imgUrls: [
          'https://img3.doubanio.com/view/photo/l/public/p2494946035.webp',
          'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
          'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
        ],
      },
      imageLoad: function (e) {
        //获取图片真实宽度
        var imgwidth = e.detail.width,
          imgheight = e.detail.height,
          //宽高比
          ratio = imgwidth / imgheight;
        //计算的高度值
        var viewHeight = 750 / ratio;
        var imgheight = viewHeight
        var imgheights = this.data.imgheights
        //把每一张图片的高度记录到数组里
        imgheights[e.target.dataset['index']] = imgheight;// 改了这里 赋值给当前 index
        this.setData({
          imgheights: imgheights,
        })
      },
      bindchange: function (e) {
        this.setData({
          current: e.detail.current
        })
      },
    })

    这次没什么问题了 把图片较大的放在数组前面,检验一下就知道了 

     

     

     

    展开全文
  • 在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现。下面通过实例代码给大家介绍微信小程序轮播图的实现方法,感兴趣的朋友一起看看吧
  • 微信小程序swiper轮播图高度自适应

    千次阅读 2019-06-11 09:49:59
    说明:swiper默认高度150px,且无法更改。 解决办法: wxml中:注意 style=‘height:{{Height}}’、mode="widthFix"和 bindload='imgHeight’ <view class="container"> <swiper class="banner" ...

    说明:swiper默认高度150px,且无法更改。

    解决办法:
    wxml中:注意 style=‘height:{{Height}}’、mode="widthFix"和 bindload='imgHeight’

    <view class="container">
    	<swiper class="banner" indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" style='height:{{Height}}'>
    		<block wx:for="{{imgUrls}}" wx:key="key">
    			<swiper-item>
    				<image class="tu" src="{{item}}" mode="widthFix" bindload='imgHeight'/>
    			</swiper-item>
    		</block>
    	</swiper>
    </view>
    

    wxss中:

    .tu {
    	width: 100%;
    }
    

    js中:注意单位是px,不能是rpx

    data: {
    	imgUrls: [
    		"/images/banner1.jpg",
    		"/images/banner2.jpg"
    	],
    	indicatorDots: true,
    	indicatorColor: 'white',
    	indicatorActiveColor: '#D75B1B',
    	autoplay: true,
    	circular: true,
    	interval: 5000,
    	Height: "" 											//这是swiper要动态设置的高度属性
    },
    
    // 轮播图宽高自适应
    imgHeight: function (e) {
    	var winWid = wx.getSystemInfoSync().windowWidth;	//获取当前屏幕的宽度
    	var imgh = e.detail.height; 						//图片高度
    	var imgw = e.detail.width; 							//图片宽度
    	//等比设置swiper的高度。即 图片宽度 / 图片高度 = 屏幕宽度 / swiper高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度。此处单位为 px,不能是 rpx。
    	var swiperH = winWid * imgh / imgw + "px"; 
    	this.setData({
    		Height: swiperH 								//设置高度,此处不能加;
    	})
    },
    
    展开全文
  • 微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高。 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper'>滑块视图容器 <!-- indicator-dots='true' 是否显示指示点 ...
  • 如何自定义微信小程序swiper轮播图面板指示点的样式 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点...

    如何自定义微信小程序swiper轮播图面板指示点的样式

    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示点的样式呢?最近在使用swiper的时候也在想这个,最后发现在调试的时候,可以看到他的选择器。如图:

     

    具体代码如下所示:

    <swiper class="swiper-box" indicator-dots="{{ indicatordots }}" autoplay="{{ autoplay }}">
        <block wx:for="{{ swiperItem }}">
            <swiper-item>
                <navigator url="{{ item.linkUrl }}">
                    <image class="slide-image" src="{{ item.imgUrl }}"></image> 
                </navigator>
            </swiper-item>
        </block>
    </swiper>
    .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
         margin-bottom: 2rpx;
    }
    .swiper-box .wx-swiper-dot{
        width:40rpx;
        display: inline-flex;
        height: 10rpx; 
        margin-left: 20rpx;
        justify-content:space-between;
    }
    .swiper-box .wx-swiper-dot::before{
        content: '';
        flex-grow: 1;  
        background: rgba(255,255,255,0.8);
        border-radius: 8rpx
    }
    .swiper-box .wx-swiper-dot-active::before{
        background:rgba(244,0,0,0.8);    
    }

    效果:

    本文为原创文章,欢迎大家非商业转载,转载时请注明出处

    出处格式:http://www.qianduan8.com/1009.html

     

     

    展开全文
  • swiper 基础库 1.0.0 开始支持,低版本需做兼容处理。 滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 属性 类型 默认值 必填 说明 最低版本 indicator-dots ...
  • 之前从来没有接触过前端,最近开始学习微信小程序,因为没有基础所以学起来有点难度。在学习这个swiper标签的时候遇到了一些问题。 那就是,轮播图中的图片显示不全,尽管已经给image设置成了widthFix、width:“100%...
  • 主要为大家详细介绍了微信小程序实现3D轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序swiper组件官方文档 1. index.wxml <swiper class="section head" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <blo.....
  • 微信小程序实现轮播图+菜单,非常不错的入门实例,可以看一下。
  • swiper中监听了bindchange 事件 this.setData({ swiperCurrent: e.detail.current }); 导致死循环 ...解决方法 适用于自定义 dot...2.在swiperChange 方法中增加轮播触发事件判断 //防止死循环 if (e.detail.so...
  • swiper微信小程序的一个滑动组件,非常重要。如果只是做简单的轮播图而不进行复杂的逻辑,直接可以使用,甚至不需要知道组件的方法。 今天在做一个如下的页面时,快速滑动swiper出现了问题: (此图片来源于网络,...
  • 主要介绍了微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下
  • 最近在搞小程序,做到轮播图时,轮播图中的小圆点位置一直在swiper标签的下方,不在图的上面,或是小圆点根本不显示(就是找不到),设置了indicatorDots: true属性,小圆点还是找不到,后来才发现一个很重要的事情...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,478
精华内容 1,391
关键字:

微信小程序swiper轮播图

微信小程序 订阅