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

1==》如何让轮播的宽度100%显示？

你先给swiper 外面添加一个大盒子,给大盒子一个类 。

<view class='lunbobox'>

然后wxss 里面设置 image , width: 100%; 在设置大盒子的宽度 width: 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{

  width: 750rpx;

}

.slide-image{

  width: 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说明一个在左一个在右
}