• 02微信小程序-轮播的宽度100%显示和轮播的基础配置


    1==》如何让轮播的宽度100%显示?
    你先给swiper 外面添加一个大盒子,给大盒子一个类 。 
    <view class='lunbobox'>
    然后wxss 里面设置 image ,  100%; 在设置大盒子的宽度  100%; 这样就可以了.
    
    
    <view class='lunbobox'>
      <!-- 轮播开始 -->
      <swiper  indicator-dots="{{indicatorDots}}"
      circular
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="750" height="150"/>
        </swiper-item>
      </block>
    </swiper>
    <!-- end -->
    </view>
    
    设置盒子的宽度 图片的宽度 让图片100%显示
    .lunbobox{
       750rpx;
    }
    
    .slide-image{
       100%;
    }
    
    
    
    2==轮播的基础配置项
       circular表示是否衔接  后面不要加true哦
    
      <swiper  indicator-dots="{{indicatorDots}}"
      circular
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="750" height="150"/>
        </swiper-item>
      </block>
    </swiper>
    
    // 轮播
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=750',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=750',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=750'
    ],
    indicatorDots: true, //是否显示小圆点  true显示
    autoplay: true,     //是否自动播放  true自动播放
    interval: 5000,     //播放的间隔
    duration: 1000,      //滑 动动画时长
    
    
    03==》跳转使用 它在导航里面的哦  <navigator></navigator>
    navigator标签类似于a标签,它里面是可以包含view标签的
    
    
    04==》如何循环三个导航链接
    ps: wx:for="{{labs}}" 循环的语法 labs是被循环的数组  注意有双引号  item是循环的每一项  
    
     <navigator url="../list/list" hover-class="navigator-hover" wx:for="{{labs}}">
        <view>{{item.title}}</view>
     </navigator>
    
    // 导航链接的数据
    labs: [{ id: 1, title: "haha1" }, { id: 3, title: "haha2" }, { id: 3, title: "haha3" }]

    05==》css3 一个在最左最右 /* 导航 */
    .daohangbox{
    display: flex;
    justify-content: space-between; //巧记两者之间 between说明一个在左一个在右
    }

  • 相关阅读:
    C
    B
    A
    F
    C
    H
    Fang Fang hdu 5455
    Fire Net hdu1045(DFS)
    Sudoku HDU 5547(DFS)
    UVA 10200 Prime Time (打表)
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11565169.html
Copyright © 2020-2023  润新知