zoukankan      html  css  js  c++  java
  • 微信小程序 轮播图 和 横向拉动 可直接套用

    <!-- 轮播图  -->
    <swiper indicator-dots="true" class="swiper">
        <swiper-item>
          <image src="../images/1.jpg" class="slide-image" mode="aspectFill" />
        </swiper-item>
        <swiper-item>
          <image src="../images/2.jpg" class="slide-image" mode="aspectFill" />
        </swiper-item>
    </swiper>
    
    
    .slide-image {
       750rpx;
      height: 300rpx;
    }
    
    .swiper {
      height: 300rpx;
       100%;
    }
    
    .swiper image {
      height: 100%;
       100%;
    }
    

      

    <!-- 横向拉动 横幅 -->
    <scroll-view class="scroll-view_H" scroll-x="true" style=" 100%">
            <view class="scroll-view-item_H">1</view>
            <view class="scroll-view-item_H">2</view>
            <view class="scroll-view-item_H">3</view>
            <view class="scroll-view-item_H">4</view>
    </scroll-view>
    
    .scroll-view_H{
      white-space: nowrap;
    }
    .scroll-view-item_H{
      display: inline-block;
       100%;
      height: 200px;
    }
  • 相关阅读:
    Beta 冲刺day 6
    Beta冲刺day5
    Beta冲刺day4
    Beta 冲刺day3
    Beta 冲刺day2
    Beta冲刺day1
    Beta预备
    城市安全风险管理项目Postmortem结果
    项目总结
    Alpha冲刺置顶随笔
  • 原文地址:https://www.cnblogs.com/panlaixing/p/8709733.html
Copyright © 2011-2022 走看看