首页 › uni-app论坛 › uni-app 实现轮播图 【数字胶囊】

飞翔的话痨 發表於 2020-11-13 12:04:00

uni-app 实现轮播图 【数字胶囊】

<p>官网：https://uniapp.dcloud.io/component/swiper</p>
<p>效果图：</p>
<p><img src="https://img2020.cnblogs.com/blog/1287814/202011/1287814-20201113114723465-1314374696.png" alt="" loading="lazy"></p>
<p>&nbsp;&nbsp;</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="swiper"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">swiper </span><span style="color: rgba(255, 0, 0, 1)">:interval</span><span style="color: rgba(0, 0, 255, 1)">="3000"</span><span style="color: rgba(255, 0, 0, 1)"> :duration</span><span style="color: rgba(0, 0, 255, 1)">="1000"</span><span style="color: rgba(255, 0, 0, 1)"> :indicator-dots</span><span style="color: rgba(0, 0, 255, 1)">="false"</span><span style="color: rgba(255, 0, 0, 1)">
   :current</span><span style="color: rgba(0, 0, 255, 1)">="topSwiperIndex"</span><span style="color: rgba(255, 0, 0, 1)"> @change</span><span style="color: rgba(0, 0, 255, 1)">="topSwiperTab"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
      <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">swiper-item </span><span style="color: rgba(255, 0, 0, 1)">v-for</span><span style="color: rgba(0, 0, 255, 1)">="(item,index) in topSwiper"</span><span style="color: rgba(255, 0, 0, 1)"> :key</span><span style="color: rgba(0, 0, 255, 1)">="index"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="swiper-item"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">image </span><span style="color: rgba(255, 0, 0, 1)">:src</span><span style="color: rgba(0, 0, 255, 1)">="item.src"</span><span style="color: rgba(255, 0, 0, 1)"> mode</span><span style="color: rgba(0, 0, 255, 1)">="aspectFill"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">image</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
      <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">swiper-item</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">swiper</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 自定义指示点dots </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="dots"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
      <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>{{topSwiperIndex+1}}/{{topSwiper.length}}<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>&nbsp;</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">data() {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
      topSwiperIndex: </span>0<span style="color: rgba(0, 0, 0, 1)">,
      topSwiper: [
            {
                src: require(</span>'../../static/images/1.jpg'<span style="color: rgba(0, 0, 0, 1)">)
            },
            {
                src: require(</span>'../../static/images/1.jpg'<span style="color: rgba(0, 0, 0, 1)">)
            },
            {
                src: require(</span>'../../static/images/1.jpg'<span style="color: rgba(0, 0, 0, 1)">)
            },
            {
                src: require(</span>'../../static/images/1.jpg'<span style="color: rgba(0, 0, 0, 1)">)
            },
            {
                src: require(</span>'../../static/images/1.jpg'<span style="color: rgba(0, 0, 0, 1)">)
            }
      ]
    };
},</span></pre>
</div>
<p>&nbsp;</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">methods:{
    topSwiperTab(e) {
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> that = <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">;
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.topSwiperIndex =<span style="color: rgba(0, 0, 0, 1)"> Number(e.target.current);
    }
}</span></pre>
</div>
<p>注：swiper轮播图的默认高度是150px,通常我们的轮播图片高度不是这个。</p>
<p>解决办法：</p>
<p>指定swiper标签的宽高，然后在指定image图片的宽高</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">swiper</span>{<span style="color: rgba(255, 0, 0, 1)">
    width</span>:<span style="color: rgba(0, 0, 255, 1)"> 100%</span>;<span style="color: rgba(255, 0, 0, 1)">
    height</span>:<span style="color: rgba(0, 0, 255, 1)"> 777.17rpx</span>;<span style="color: rgba(255, 0, 0, 1)">
   
    swiper-item{

      image {
            width</span>:<span style="color: rgba(0, 0, 255, 1)"> 100%</span>;<span style="color: rgba(255, 0, 0, 1)">
            height</span>:<span style="color: rgba(0, 0, 255, 1)"> 781.7rpx</span>;<span style="color: rgba(255, 0, 0, 1)">
            display</span>:<span style="color: rgba(0, 0, 255, 1)"> block</span>;
      }<span style="color: rgba(128, 0, 0, 1)">
    }
}</span></pre>
</div>
<p>拓展：uni-app实现轮播图自定义小圆点</p><br><br>
来源：https://www.cnblogs.com/hellocd/p/13968682.html

查看完整版本: uni-app 实现轮播图 【数字胶囊】