E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现轮播新北区E企盈小程序图(超简单)

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}}"            style="height:{{imgheights[current]}}rpx;">            <block wx:for="{{GoodsDatas.imgshow}}" wx:for-key="{{index}}" wx:for-item="image">               <swiper-item>                    <image src="{{image.img}}" data-id="{{index}}" class="slide-image" mode="widthFix" bindload="imageLoad" />               </swiper-item>             </block>         </swiper>     </view></templa开通棉单面莱卡小程序电话:4006-838-530te><script>  import wepy from '@wepy/core'  wepy.page({    data: {      circular: true,      //是否显示画板指示点,根据图片数量自动生成多少个圆点      indicatorDots: true,      //选中点的颜色      //是否竖直      vertical开通仿真丝睡衣面料小程序电话:4006-838-530: 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.cur开通梳子小程序电话:4006-838-530rent)      this.setData({        current: e.detail.current      })    }  })</script>

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现轮播新北区E企盈小程序图(超简单)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏