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


Posted in Javascript onNovember 22, 2019

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>
</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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
javascript实现控制div颜色
Jul 07 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 #Javascript
Js代码中的span拼接问题解决
Nov 22 #Javascript
微信小程序商品详情页底部弹出框
Nov 22 #Javascript
小程序实现图片预览裁剪插件
Nov 22 #Javascript
Vue数据双向绑定底层实现原理
Nov 22 #Javascript
Node如何后台数据库使用增删改查功能
Nov 21 #Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 #Javascript
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python常规方法实现数组的全排列
2015/03/17 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
公司清洁工岗位职责
2013/12/14 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
2014年党务公开方案
2014/05/08 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
学校师德师风整改方案
2014/10/28 职场文书
大学生学期个人总结
2015/02/12 职场文书
运动员入场词
2015/07/18 职场文书
我的生日感言
2015/08/03 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
分享7个 Python 实战项目练习
2022/03/03 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python