小程序筆記三：幻燈片swiper 和圖片自定義高度

滑動組件：scroll-view

wxml代碼

<view>
 <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
        <view class="tab-item {{currentTab==0?'active':''}}"  data-current="0" bindtap="swichNav">健康</view>
        <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">情感</view>
        <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">職場</view>
        <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">育兒</view>
        <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">糾紛</view>
        <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">青蔥</view>
        <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">全部</view>
        <view class="tab-item {{currentTab==7?'active':''}}" data-current="7" bindtap="swichNav">其他</view>
    </scroll-view>
</view>

 

js代碼

page({
   data:{
           currentTab:0
     } 
})    

 

wxss代碼

.tab-h{height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: relative;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}

 

 

 參考地址：https://blog.csdn.net/sophie_u/article/details/71745125

幻燈片組件：swiper

js代碼：

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  
})

　　

wxml代碼

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

　　

參考手冊：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

 

圖片自定義高度

圖片實際imgW:1080px   imgH:300px;

小程序屏幕寬度750

小程序圖片高度 = 750/(1080/300)

// 如
<swiper indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="bindchange" style="height:{{750/(vo.floor_swiper[0].imgW/vo.floor_swiper[0].imgH)}}rpx;" data-d="{{v.img_height}}">

 

小程序圖片高度設定

方法一：在后台直接填寫參數（推薦使用）

方法二：小程序js計算