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


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 相关文章推荐
js给页面加style无效果的解决方法
Jan 20 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
javascript定时器完整实例
Feb 10 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
基于Vue实现timepicker
Apr 25 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 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
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python框架django基础指南
2016/09/08 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python 伯努利分布详解
2020/02/25 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Python发送邮件实现基础解析
2020/08/14 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
宣传口号大全
2014/06/16 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
平安家庭事迹材料
2014/12/20 职场文书
售票员岗位职责
2015/02/15 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js