• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序中实现左右滑动图片翻页

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

页面代码

<swiper 
  class="container" 
  indicator-dots="{{indicatordots}}" 
  autoplay="{{autoplay}}" 
  interval="{{interval}}" 
  duration="{{duration}}" 
  bindchange='onSlideChange'
  >
    <block wx:for="{{imgList}}" wx:key="index">
      <swiper-item class="vol-swiper-item">
        <view class="vol-card">
          <image class="vol-picture" src="{{item}}" mode="aspectFill"></image>
        </view>
      </swiper-item>
    </block>
  </swiper>

js代码

data: {
    hidden: false,
    imgList: [],
    autoplay: false,
    indicatordots: false,
    duration: 500
  },

  onLoad: function () {
    var that = this;
    var videoUrl = "请求的接口地址";
    Api.http(videoUrl, (res) => {
      that.setData({
        hidden: true,
        imgList: res,
      })
    })
  },

  onSlideChange: function (event) { 
    var postId = event.detail.current; 
    console.log(postId);
  },

样式:

.container {
  height: 100vh;
  padding-top: 0px;
}
.vol-swiper-item {
  box-sizing: border-box;
}
 
.vol-card {
  /*parent layout  and  this inner padding*/
  padding: 20rpx;
  height: 965rpx;
  background: #fff;
}
.vol-swiper {
  height: 100%;
}
 
.vol-picture {
  width: 100%;
}

其中:

indicator-dots:控制底下显示的圆点。

autoplay:控制自动播放。

interval:如果开启自动播放,控制切换时间间隔。

duration:滑动动画时长。

bindchange:current 改变时会触发 change 事件,event.detail = {current: current, source: source}

详细参考:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序登录、微信网页授权(Java版)发布时间:2022-07-18
下一篇:
微信小程序bind:click带参数的方法发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap