当前位置 主页 > 网站技术 > 代码类 >

    超简单的微信小程序轮播图

    栏目:代码类 时间:2019-11-22 15:06

    Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv、span等)写前端代码,也可以用微信小程序语法写(view、swiper标签),然后npm run dev编译后,在微信开发者工具里面导入该项目,就可以调试项目,查看效果。

    效果图:

    微信小程序实现轮播图,本例是在*.wpy页面开发(该页面的temlate内容对应小程序的wxml,style样式对应小程序的wxss,script对应小程序的js文件,config对应小程序的json文件)

    <style type="less" scoped="scoped">
      .swiper image {
       width: 100%;
       height: auto;
     }
     
      .swiper-image {
       height: 100%;
       width: 100%;
      }
     
      .slide-image {
       height: 100%;
       width: 100%;
       display: block;
      }
    </style>
    <template>
       <view class="swiper">
        <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}"
          >
          <block wx:for="{{GoodsDatas.imgshow}}" wx:for-key="{{index}}" wx:for-item="image">
            <swiper-item>
              <image src="{{image.img}}" data- class="slide-image" mode="widthFix" bindload="imageLoad" />
            </swiper-item>
           </block>
         </swiper>
       </view>
    </template>
    <script>
     import wepy from '@wepy/core'
     wepy.page({
      data: {
       circular: true,
       //是否显示画板指示点,根据图片数量自动生成多少个圆点
       indicatorDots: true,
       //选中点的颜色
       //是否竖直
       vertical: false,
       //是否自动切换
       autoplay: true,
       //自动切换的间隔
       interval: 3000,
       //滑动动画时长毫秒
       duration: 1000,
       //所有图片的高度
       imgheights: [],
       //图片宽度
       imgwidth: 320,
       //默认
       current: 0
      },
      imageLoad: function(e) { //获取图片真实宽度
       var imgwidth = e.detail.width,
        imgheight = e.detail.height,
        //宽高比
        ratio = imgwidth / imgheight;
       console.log(imgwidth, imgheight)
       //计算的高度值
       var viewHeight = 750 / ratio;
       var imgheight = viewHeight;
       var imgheights = this.data.imgheights;
       //把每一张图片的对应的高度记录到数组里
       imgheights[e.target.dataset.id] = imgheight;
       this.setData({
        imgheights: imgheights
       })
      },
      bindchange: function(e) {
       // console.log(e.detail.current)
       this.setData({
        current: e.detail.current
       })
      }
     })
    </script>

    将代码粘过去之后,只需要修改循环对象为图片数据就可以了。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家。