技术文章
当前位置:首页 > Javascript技术文章 > 微信小程序视图容器(swiper)组件创建轮播图

微信小程序视图容器创建轮播图实例

  • 发布时间:
  • 作者:码农之家原创
  • 点击:160

这篇文章主要知识点是关于微信小程序、swiper、轮播图、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

微信小程序运营实战
  • 类型:小程序运营大小:33.4 MB格式:PDF出版:中国经济出版社作者:袁国宝
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

微信小程序视图容器(swiper)组件创建轮播图

 本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下

一、视图容器(Swiper)

1、swiper:滑块视图容器

微信官方文档

微信小程序视图容器(swiper)组件创建轮播图

微信小程序视图容器(swiper)组件创建轮播图

二、swiper应用

1、页面逻辑(index.js)

Page({
 data: {
 imgUrls: [
  {
  link: '/pages/index/index',
  url: '/images/001.jpg'
  }, {
  link: '/pages/list/list',
  url: '/images/002.jpg'
  }, {
  link: '/pages/list/list',
  url: '/images/003.jpg'
  }
 ],
 indicatorDots: true, //小点
 indicatorColor: "white",//指示点颜色
 activeColor: "coral",//当前选中的指示点颜色
 autoplay: false, //是否自动轮播
 interval: 3000, //间隔时间
 duration: 3000, //滑动时间
 }

其中 imgUrls 是我们轮播图中将要用到的 图片地址和 跳转链接

    indicatgorDots 是否出现焦点

    autoplay 是否自动播放

    interval 自动播放间隔时间

    duration 滑动动画时间

2、页面结构(index.wxml)

<!--轮播图-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" 
 indicator-active-color="{{activeColor}}">
 <block wx:for="{{imgUrls}}">
 <swiper-item>
  <navigator url="{{item.link}}" hover-class="navigator-hover">
  <image src="{{item.url}}" class="slide-image" width="355" height="200" />
  </navigator>
 </swiper-item>
 </block>
</swiper>

注意:swiper 千万不要在外面  加上任何标签 例如 <view> 之类的 ,如果加了可能会导致轮播图出不来

3、页面样式(index.wxss)

/*轮播图*/
.slide-image {
 width: 100%;
}

三、小程序效果图

赶快动手实践就可以看到如图所示效果图:

微信小程序视图容器(swiper)组件创建轮播图

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

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到JS使用栈判断给定字符串是、 ES6中解构、参数、模块和、 微信小程序视图容器创建、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:JS封装模仿qq消息提示框的实例代码

下一篇:JS使用栈判断给定字符串是否回文算法的实例讲解

展开 +

收起 -

小程序开发 相关电子书
小程序开发 学习笔记
网友NO.349211

VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使用的比较频繁的插件,现在分享一下使用方法以及开发中会遇到的一些问题。 我们先下载包,然后去main.js里面配置。 npm install vue-awesome-swiper --save 我们可以用import的方法 //importimport Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper' 也可以用require var Vue = require('vue')var VueAwesomeSwiper = require('vue-awesome-swiper') 两者都可以达到目的,然后再mian.js里面全局注册 Vue.use(VueAwesomeSwiper) 在模板里使用 import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }} template swiper :options="swiperOption" ref="mySwiper" !-- slides -- swiper-slide v-for="slide in swiperSlides" v-bind: :key="slide.id"/swiper-slide !-- Optional controls -- div class="swiper-pagination" slot="paginatio……

网友NO.367200

微信小程序之swiper轮播图中的图片自适应高度的方法

小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏。辣么,怎样让图片自适应不同分辨率捏。 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度。 1.结构 swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}' block wx:for="{{imgUrls}}" swiper-item image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/ //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦,还有就是设置这个image 100%宽度哟 /swiper-item /block/swiper swiper的各个属性在官方文档中都有,这里就不说明了。最主要的是: style='height:{{Height}}' //动态设置swiper的高度 2.在page里面: data:……

网友NO.790424

js使用swiper实现层叠轮播效果实例代码

前言 swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容 实现过程: 一.移动端-需求swiper 4.0.3实现层叠轮播 二.实现效果如下 三.方案:查找了下发现使用swiper的切换效果coverflowEffect可以实现 1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式 2.coverflow的属性: rotate:slide做3d旋转时Y轴的旋转角度。默认50。 stretch:每个slide之间的拉伸值,越大slide靠得越紧。 默认0。 depth:slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。 modifier:depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。 slideShadows:开启slide阴影。默认 true。 四.代码: this.swiper = n……

网友NO.495992

vue-cli webpack 引入swiper的操作方法

1:下载需要 swiper 的js文件和css文件 http://www.swiper.com.cn/ 2:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。 3:安装runtime: npm install babel-runtime 4:修改.eslintrc.js文件如下: 最后一行添加 'globals': { "Swiper": true } //这个地方是新加入的 全局注入 5: vue模板中引入 swiper.min.js import Swiper from '@/../static/js/swiper.min.js'; 6: vue模板中引入 swiper-3.4.2.min.css @import url("../../assets/css/swiper-3.4.2.min.css"); 7: html 结构 !-- Swiper -- div class="home_banner" div class="swiper-container" div class="swiper-wrapper" div class="swiper-slide" img src="./../../assets/img/sec_3_top_2@2x.jpg" /div div class="swiper-slide" img src="./../../assets/img/sec_3_top_2@2x.jpg" /div div class="swiper-slide" img src="./../../assets/img/sec_3_top_2@2x.jpg" /div /div /div /div !-- Swiper end -- 8:vue js mounted() { var mySwiper = new Swiper('.home_banner .swiper-container', { direc……

网友NO.307547

详解Vue.js使用Swiper.js在iOS<11时出现错误

前言 swiper这是一个很强大的轮播展示工具,但往往也会有一些未知BUG,尤其是在手机端,由于性能局限,会导致效果和PC测试的时候有完全不一样的效果 在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS 11 会出现下面这个错误: SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode. 原因 Swiper.js 这个 npm 包里面还使用了 dom7 和 ssr-window ,所以需要对这两个插件进行 Babel 转 ES5 解决方案 Vue CLI 2.x 下,在 build/webpack.base.config.js 文件中修改 // ...modules: { rules: [ // ... { test: /\.js$/, loader: 'babel-loader', include: [ resolve('src'), resolve('test'), resolve('node_modules/swiper/dist/js/'), resolve('node_modules/webpack-dev-server/client'), // 新增 resolve('node_modules/swiper'), resolve('node_modules/dom7'), resolve('node_modules/ssr-window') ] }, ……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息