子钦加油

扩大
缩小

小程序导航栏全屏navigationStyle自定义导航栏,小程序轮播图导航栏

  <!-- swiper -->
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="key">
          <swiper-item>
            <view class="swiper-item">
              <image src="{{ item.url }}"></image>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>

css

.swiper{
position: fixed;
width: 750rpx;
height: 422rpx;
}
swiper{
height: 422rpx;
}

js

  data: {
    background: [{
      key: 1,
      url: '../../../images/banner.png'
    }, {
      key: 2,
      url: '../../../images/banner.png'
    }, {
      key: 3,
      url: '../../../images/banner.png'
    }, {
      key: 4,
      url: '../../../images/banner.png'
    }],
    
    })

json重点
"navigationStyle": "custom"
如果轮播样式在所有页面都有就放到app.json中,只有某一个页面有就单独放在那个文件下
效果

 

 

  

posted on 2020-07-27 23:22  子钦加油  阅读(578)  评论(0编辑  收藏  举报

导航

返回顶部