zoukankan      html  css  js  c++  java
  • 微信小程序swiper组件实现图片宽度自适应

    wxml 代码:

    <!--pages/swipe/swipe.wxml-->
    <view>
      <swiper circular="true"     indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}">
          <swiper-item>
            <image src="{{item}}" style=" {{imageWidth}}px;" class="slide-image" model="aspectFit" />
          </swiper-item>
        </block>
      </swiper>
    
    </view>
    model="aspectFit"    mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
    缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。


    Js代码:
      data: {
        imageWidth: wx.getSystemInfoSync().windowWidth,//图片宽度   
        indicatorDots:true,
        autoplay:true,
        interval: 2000,
        duration: 1000,
        imgUrls: [
          'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
          'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
          'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
        ],
      },
    wx.getSystemInfoSync().windowWidth   获取屏幕的窗口宽度






  • 相关阅读:
    GITHUB常见命令
    GITHUB常用命令
    java构建简单的HTTP服务器
    是否会被锁
    GITHUB使用指南
    GITHUB使用指南、
    C#
    金蝶后台表对应
    金蝶K3表
    nodejs nodejs的操作
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/11158995.html
Copyright © 2011-2022 走看看