zoukankan      html  css  js  c++  java
  • 微信小程序中实现左右滑动图片翻页

    页面代码

    <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 {
       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

  • 相关阅读:
    加载器学习记录
    日常记录
    php实现银联支付
    PHP 判断密码强度
    laravel artisan 命令列表
    PHP && ,and ,||,or 的区别
    数组与对象的转换
    正则表达式
    微信退款
    laravel when 的用法
  • 原文地址:https://www.cnblogs.com/dxzg/p/9772096.html
Copyright © 2011-2022 走看看