slider.wxml 1.5 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <view class="bar">
  2. <view class='ml-sm iconfont icon-titles success-text'>全屏限高轮播</view>
  3. </view>
  4. <swiper class='swiper-screen' indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-active-color="#ff6600">
  5. <swiper-item wx:for="1234">
  6. <image src="http://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill' />
  7. </swiper-item>
  8. </swiper>
  9. <view class="bar mt-sm">
  10. <view class='ml-sm iconfont icon-titles success-text'>带背景图轮播</view>
  11. </view>
  12. <swiper class='swiper-bg' indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-active-color="#ff6600">
  13. <swiper-item wx:for="124">
  14. <view class='shadow-alice'>
  15. <image src="http://image.weilanwl.com/img/4x3-{{index+2}}.jpg" mode='aspectFill' />
  16. </view>
  17. </swiper-item>
  18. </swiper>
  19. <view class="bar mt-sm">
  20. <view class='ml-sm iconfont icon-titles success-text'>多图轮播(scroll-view)</view>
  21. </view>
  22. <view class='scroll-bar'>
  23. <view class='scroll-left' bindtap='scrollLeft'>
  24. <text class='iconfont icon-back'></text>
  25. </view>
  26. <scroll-view scroll-x class='scroll-list-box' scroll-into-view="in-{{scrollInto}}" scroll-with-animation>
  27. <view class='scroll-list'>
  28. <view class='scroll-item' id="in-{{index}}" style='background-image:url(http://image.weilanwl.com/img/4x3-{{item.id}}.jpg)' wx:for="{{scrollList}}"></view>
  29. </view>
  30. </scroll-view>
  31. <view class='scroll-right' bindtap='scrollRight'>
  32. <text class='iconfont icon-right'></text>
  33. </view>
  34. </view>