微信小程序 旋转木马轮播图

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序 旋转木马轮播图，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1737字，纯文字阅读大概需要3分钟。

内容图文

效果图如下

 

wxml代码:

<view class='top'>
    <swiper class='swiperClass' indicator-dots='true' style='height:784rpx;width:100%' circular previous-margin="140rpx" next-margin="140rpx" bindchange="bindchange">
      <block wx:for="{{imgUrls}}"
        wx:key="{{index}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill' />
        </swiper-item>

      </block>
    </swiper>
  </view>

 wxss代码:

page {
  background: #fff;
}

.swiperClass {
  margin: 0;
}

.slide-image {
  width: 100%;
  height: 694rpx;
  border-radius: 10px;
  position: relative;
  background: pink;
  margin-top: 20rpx;
}

swiper-item image.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
}

swiper-item image.quiet {
  transform: scale(0.8333333);
  transition: all 0.2s ease-in 0s;
}

.top {
  width: 750rpx;
  height: 784rpx;
  background: rgba(246, 245, 245, 1);
  padding-top: 10rpx;
}

.item {
  background: pink;
}

 

js代码:

const app = getApp()
const myUrl = require("../../../utils/url.js");
const util = require("../../../utils/util.js");
var user = wx.getStorageSync('userMsg');


Page({

  /**
   * 页面的初始数据
   */
  data: {

    imgUrls: ['http://t16img.yangkeduo.com/pdd_oms/2019-02-27/ef43e9cc33aec27c10acd8fbe355c1b3.jpg', 'http://t16img.yangkeduo.com/pdd_oms/2019-02-26/16c11fbc614c1b5369a281c42c6f8aab.jpg', 'http://t16img.yangkeduo.com/pdd_oms/2019-02-25/a4b9a8ca3cc79a915e35ad4e3d025afd.jpg', 'http://t16img.yangkeduo.com/pdd_oms/2019-02-22/84c0d26587c2cc2cd0ead5108bad06e2.jpg', 'http://t16img.yangkeduo.com/pdd_oms/2019-02-20/96c986bbd28699bb36f591d87caab619.jpg'],
    swiperIndex: 0, //这里不写第一次启动展示的时候会有问题
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function(options) {
    console.log('haha');
    let that = this;

  },


  bindchange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  },

 
})

 

 

 

 

内容总结

以上是互联网集市为您收集整理的微信小程序 旋转木马轮播图全部内容，希望文章能够帮你解决微信小程序 旋转木马轮播图所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---