微信小程序swiper左右扩展各显示一半代码实例
这篇文章主要介绍了微信小程序swiper左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
实现如下的功能:
动图展示效果
代码如下:
index.wxml
<swiper class='swiper' next-margin='120rpx' bindchange='swiper'> <block wx:for="{{devices}}" wx:key="" wx:for-item="device"> <swiper-item item-id="{{device.type}}"> <view class="device {{swiperIndex == index ?'active':''}}" data-currentTab="{{index}}"> <view class='device-img'> <image src='{{device.deviceImg}}'></image> </view> </view> </swiper-item> </block> </swiper>
index.js
Page({ data: { swiperIndex: 0, // 设置页面 devices: [ { deviceImg: "../../img/1.jpg" }, { deviceImg: "../../img/2.jpg" }, { deviceImg: "../../img/3.jpg" } ], }, swiper: function (e) { let that = this; let index = e.detail.current; that.setData({ swiperIndex: index }); } })
index.wss
/* 轮播图 */ .devices{ width: 638rpx; } .swiper{ width: 580rpx; height: 600rpx; margin-left:48rpx; white-space:nowrap; /* border: solid red 1px; */ } .device{ width: 410rpx; height: 94%; display:inline-block; margin-left: 20rpx; background: rosybrown; transform: scale(0.9); transition:all .2s ease 0s; } .active{ transform: none; transition: all 0.2s ease-in 0s; } .device-img{ width: 100%; height: 520rpx; margin-top: 40rpx; display: flex; justify-content: center; align-items: center; } .device-img image{ width:350rpx; height:190rpx; }
index.json
{ "usingComponents": {} }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信小程序swiper禁止用户手动滑动代码实例
前言 最近做一个项目,由于用到了竖向swiper,导致占用屏幕过大,用户滑动总是滑动到swiper组件,页面无法向下拉动,于是找各种办法禁止用户手动滑动swiper组件. 经过网上一番查找,网友们也是闹洞大开,各种方法都想出来了,有用透明蒙层覆盖的,这不失为一种很好的解决办法,但是如果swiper上有元素需要点击就没有办法了. 继续查找,于是找到了用 catchtouchmove 事件来截获用户手动滑动事件,这样既解决了禁用用户手动滑动,有解决了有点击按钮不影响使用 代码: WXML: <swi
-
微信小程序swiper实现滑动放大缩小效果
效果图如下所示: 具体代码如下所示: <swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange"> <block wx:for="{{imgUrls}}" wx:index="{{index}}&qu
-
微信小程序实现的3d轮播图效果示例【基于swiper组件】
本文实例讲述了微信小程序实现的3d轮播图效果.分享给大家供大家参考,具体如下: 前面写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'> <swiper-item wx:f
-
微信小程序利用swiper+css实现购物车商品删除功能
要实现的购物车效果如下: 小程序通过bind与catch绑定事件,没有event.stopPropagation()方法. bind:不会阻止冒泡事件向上冒泡, catch:可以阻止冒泡事件向上冒泡 用touchstart.touchmove.touchend实现滑块效果,无法动态js控制何时冒泡何时阻止冒泡,就会出现用bind时,左右上下滑动乱窜:用catch,商品区域只能左右滑动,无法上下滚动 而小程序提供的swiper通过css就可以实现删除滑块效果,同时不影响页面的正常滚动.具体如下 <
-
微信小程序之swiper轮播图中的图片自适应高度的方法
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度. 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}
-
微信小程序 swiper 组件遇到的问题及解决方法
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper class="test" .....>
-
微信小程序实现tab和swiper切换结合效果
本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码,供大家参考,具体内容如下 先上效果图: 实现代码如下: wxml页面 <scroll-view scroll-x="true" class="weui-navbar"> <block wx:for-items="{{tabs}}"> <view id="{{index}}" class="{{activeIndex
-
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
本文实例讲述了微信小程序实现swiper切换卡内嵌滚动条不显示的方法.分享给大家供大家参考,具体如下: index.wxml文件: <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">为你推荐</view&g
-
微信小程序swiper左右扩展各显示一半代码实例
这篇文章主要介绍了微信小程序swiper左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现如下的功能: 动图展示效果 代码如下: index.wxml <swiper class='swiper' next-margin='120rpx' bindchange='swiper'> <block wx:for="{{devices}}" wx:key="" wx:for-
-
微信小程序swiper使用网络图片不显示问题解决
这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 wxml代码: <view class="container"> <swiper indicator-dots="true}" autoplay="true" interval="3000" duration="1">
-
微信小程序 swiper组件构建轮播图的实例
微信小程序 swiper组件构建轮播图的实例 实现效果图: wxml基础文件: <view class="classname"> <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red"> <swiper-item><image src=&qu
-
微信小程序 点击切换样式scroll-view实现代码实例
这篇文章主要介绍了微信小程序 点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="
-
mpvue微信小程序的接口请求fly全局拦截代码实例
这篇文章主要介绍了mpvue微信小程序的接口请求fly全局拦截代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 业务要求: 需要进入页面时就要游客登陆拿到token: 之后的接口都是需要这个token: 其他操作则需要授权登陆,此时的token已失效: token过久之后会过期: 业务实现: 1.全局拦截 fly.interceptors.request.use(request => { const token = storage.get
-
微信小程序request请求封装,验签代码实例
这篇文章主要介绍了微信小程序request请求封装,验签代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.公共文件util添加 request请求 //简单封装请求 function request(params, path, isShowLoading = true, goBack = false, type = 'none', obj={}) { try { console.log(path) let NowTime = Date
-
微信小程序自定义菜单切换栏tabbar组件代码实例
这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx:key="{{index}}"> <view class="item_name {{tabInde
-
微信小程序封装多张图片上传api代码实例
这篇文章主要介绍了微信小程序封装多张图片上传api代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 export default class Upload{ constructor(object) { this.obj = { count:1, sizeType:['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType:['album','camera'], //
-
基于angular实现模拟微信小程序swiper组件
这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组件,就可以在写界面的时候省不少时间和代码,轮播图片跟可滑动列表都可以用.导致现在回来写angular项目时也想整一个这样的组件出来,本文就将使用angular的组件能力和服务能力完成这么一个比较通用,耦合度较低的swiper出来. 首先要选择使用的技术,要实现的是与界面打交道的东西,自然是实现成一个
-
微信小程序 swiper组件详解及实例代码
微信小程序 swiper组件 常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx
随机推荐
- angularjs学习笔记之三大模块(modal,controller,view)
- asp.net及javascript判断是否手机访问的方法
- JavaScript中localStorage对象存储方式实例分析
- ajax 三种实现方法实例代码
- Python 基于Twisted框架的文件夹网络传输源码
- JS组件Bootstrap Select2使用方法详解
- 用HAProxy来检测MySQL复制的延迟的教程
- vue实现百度搜索下拉提示功能实例
- 解析Mac OS下部署Pyhton的Django框架项目的过程
- 同一页面多个商品倒计时JS 基于面向对象的javascript
- SQL Server 数据库备份和还原认识和总结 (一)
- 数据库性能优化二:数据库表优化提升性能
- js模仿jquery的写法示例代码
- java 中迭代器的使用方法详解
- Android编程之短信窃听器实现方法
- C#中datatable去重的方法
- php操作csv文件代码实例汇总
- jquery 扑捉回车键事件代码
- Java使用for循环解决经典的鸡兔同笼问题示例
- 易语言取磁盘总空间、剩余空间方法