图片适应问题

来源:2-1 首页开发(上)

不说话的电灯

2018-11-02 13:40

https://img4.mukewang.com/5bdbe30c0001944406040365.jpg

像这种的话写什么代码可以解决?

写回答 关注

2回答

  • 慕移动9181930
    2022-03-27 11:13:53
  • 等待就是浪费_青春
    2018-11-05 15:43:05

    wxml代码:

    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicatorColor="{{indicatorColor}}" indicatorActiveColor="{{indicatorActiveColor}}">

        <block wx:for="{{imgUrls}}">

          <swiper-item>

            <image src="{{item}}" class="slide-image" width="355" height="150" />

          </swiper-item>

        </block>

      </swiper> 

    样式:

    swiper {

      width: 100%;

      height: 340rpx;

    }

    JS

      data: {

        // 轮播

         imgUrls: [

           '/images/banner/banner1.jpg',

           '/images/banner/banner2.jpg',

          '/images/banner/banner3.jpg',

         ],

        // 是否显示面板指示点

        indicatorDots: true,

        // 是否自动切换

        autoplay: true,

        // 自动切换时间间隔

        interval: 5000,

        // 滑动动画时长

        duration: 1000,

        // 是否采用衔接滑动

        circular: true,

        // 指示点颜色

        indicatorColor: "white",

        // 当前选中的指示点颜色

         indicatorActiveColor: "red",

      },

    注意:图片大小按iphone6的尺寸来,640x300像素即可。

入门微信小程序开发

带你入门微信小程序开发,了解微信小程序的基本知识。

172015 学习 · 323 问题

查看课程

相似问题