-
uniapp swiper高度自适应
2020-09-12 09:48:23uniapp swiper高度自适应 一、给个class <swiper class="sw"> 二、给class给样式 .sw{ position: fixed; height: 100%; width: 100%; top:2.5rem; left: 0; } 简单吧!展开全文 -
uniapp 修改swiper样式
2020-07-08 18:45:34用wx-开头可以覆盖 比如swiper的默认样式为 uni-swiper .uni-swiper-wrapper{} 只需要在css里面加一条wx-swiper .wx-swiper-wrapper{} 就可以覆盖了 ps: 单位用px或rpx /* wx */ wx-swiper .wx-swiper-dot { ...在小程序和app中,更改官方组件样式,swiper重写样式H5页面有效,app无效,解决方法如下
用wx-开头可以覆盖 比如swiper的默认样式为 uni-swiper .uni-swiper-wrapper{} 只需要在css里面加一条wx-swiper .wx-swiper-wrapper{} 就可以覆盖了
ps: 单位用px或rpx
/* wx */ wx-swiper .wx-swiper-dot { width: 10px; height: 3px; } wx-swiper .wx-swiper-dot-active { background-color: #000; width: 20px; border-radius: 5px; }
效果如下
-
Uniapp自定义swiper滑动模块
2020-08-27 22:21:36Uniapp自定义swiper滑动模块简介参考文章上代码 简介 用Uniapp写的App端swiper滑动模块,主要是理解原理,如果后期有可能的话再优化成组件。本篇文章主要参考卧龙派的文章手把手教你用原生js来写一个swiper滑块插件...简介
用Uniapp写的App端swiper滑动模块,主要是理解原理,如果后期有可能的话再优化成组件。本篇文章主要参考卧龙派的文章手把手教你用原生js来写一个swiper滑块插件(上)原理,感谢分享。
参考文章
上代码
我就耍一次流氓吧先,主要内容看参考文章,以后有时间再详细补上。
<template> <view> <view> <p>abc</p> </view> <view class="ps-swiper"> <view :class="{'ps-swiper-container':isTrue,'move':isMove}" @touchstart="touchstartEvent" @touchmove="touchmoveEvent" @touchend="touchendEvent" :style="{ left: initLeft + 'rpx' }"> <view class="ps-swiper-item" style="background-color: #007AFF;">1</view> <view class="ps-swiper-item" style="background-color: #aa00ff;">2</view> <view class="ps-swiper-item" style="background-color: #ffff7f;">3</view> </view> </view> </view> </template> <script> export default { data() { return { isTrue:true, isMove:false,//控制是否应用move类 state: 0, //监控鼠标事件,鼠标落下之后才开始动作 oldEvent: null, // 用来记录鼠标上次的位置 initLeft: 0, //rpx ;//ps-swiper-container初始left值 initIndex: 0, // 记录当前滑块的顺序(从0开始) moveLeft: 0, } }, onLoad() { console.log(this.initLeft); }, methods: { flashIndex: function() { }, touchstartEvent: function(event) { // console.log(event); this.isMove = false; this.moveLeft = 0; this.oldEvent = event; // 当鼠标按下时候记录初始位置 this.state = 1; //console.log("event 事件:"+event.touches[0].pageX); console.log("手指按下了"); }, touchmoveEvent: function(event) { if (this.state != 1) { return }; // 只有当state == 1时候才允许执行该事件 this.moveStart = event.touches[0].pageX; // 用当前鼠标的位置来和上次鼠标的位置作比较 // 如果当前鼠标的pageX小于上次鼠标的pageX,那就表示鼠标在向左拖动,就需要把容器left值减去鼠标移动的距离 if (event.touches[0].pageX < this.oldEvent.touches[0].pageX) { this.initLeft -= this.oldEvent.touches[0].pageX - event.touches[0].pageX; // this.initLeft -= 300; this.moveLeft++; } else { this.initLeft += event.touches[0].pageX - this.oldEvent.touches[0].pageX; this.moveLeft--; } // 完事之后记得把当前鼠标的位置赋值给oldEvent this.oldEvent = event; // console.log(this.initLeft); // console.log("手指移动了"); }, touchendEvent: function(event) { // console.log(event); console.log("this.moveLeft" + this.moveLeft); if (this.moveLeft > 3) { this.initIndex++; if(this.initIndex==3){this.initIndex--;}//右边界,不能滑动到超一屏 } else if (this.moveLeft < -3){ this.initIndex--; if (this.initIndex < 0) { this.initIndex = 0; } //左边界,不能滑动到负一屏 } this.isMove = true; console.log("this.initIndex" + this.initIndex); this.initLeft = this.initIndex * -300; this.state = 0; console.log("手指起来了"); } } } </script> <style> .ps-swiper { width: 300rpx; /* 下面是为了让大家看的更清楚,加的修饰 */ padding: 30rpx 0; margin: 0 auto; background: #FFB973; } .ps-swiper .ps-swiper-container { position: relative; /* 为啥要设置-300px呢,因为我想让他默认在第二个滑块的位置,一会会给大家演示 */ /* left: -300rpx; */ /* 让容器尽可能的宽,这样才能容纳更多的滑块 */ width: 10000%; /* 让内部滑块可以排成一行 */ display: flex; /* 滑动时有动画:如果元素的left值变更,会有一个0.2s的过渡动画(补间动画) */ /* transition: left 0.2s ease-in-out; */ /* 下面是为了让大家看的更清楚,加的修饰 */ background: red; padding: 15rpx 0; } .move { transition: left 0.2s ease-in-out; } .ps-swiper .ps-swiper-container .ps-swiper-item { /* 宽度设置1%会按照外层视图的宽度来铺满 */ width: 1%; height: 375rpx; background: #eee; } </style>
-
uniapp的swiper动态赋值问题
2020-07-15 14:48:51uniapp的swiper动态复制问题过程html的结构js中操作 过程 可以给组件赋class值,通过uniapp的createSelectorQuery方法动态获取高度 如果多个组件在一起,可以通过view包裹住所有组件,获取view的高度 mounted中获取...过程
- 可以给组件赋class值,通过uniapp的createSelectorQuery方法动态获取高度
- 如果多个组件在一起,可以通过view包裹住所有组件,获取view的高度
- mounted中获取初始高度,watch中监听切换,动态赋值给swiper
html的结构
<swiper :style="{height: componentHeight + 70 + 'px'}" @change="swiperChange" :current="currentTab"> <swiper-item> <view class="wrapper"> <Introduce :vipInfo="vipInfo" :jieshao="gameInfo.describe" :img="gameInfo.info_img_link"></Introduce> <Cash :cashList = 'couponInfo' @close="onCloseWays" :isShow="true" ></Cash> <Recharge @chong = 'onChong' :isShow="true" :rechargeInfo="rechargeInfo" @more="onMore"></Recharge> <Activity :isShow="true" @more="onMore" :activeInfo="activeInfo"></Activity> <Gift :isShow="true" @more="onMore" :packageInfo="packageInfo"></Gift> <Wlk :isShow="true" @more="onMore" :serviceInfo="serviceInfo"></Wlk> <Change @purches="onPurches" :isShow="true" @more="onMore" :transactionInfo="transactionInfo" :img="gameInfo.thumb_img"></Change> </view> </swiper-item> <swiper-item> <Recharge @chong = 'onChong' class='recharge-item' :rechargeInfo="rechargeInfoOne" :isShow="false"></Recharge> </swiper-item> <swiper-item> <Activity class='activity-item1' :activeInfo="activeInfoOne"></Activity> </swiper-item> <swiper-item> <Gift class='gift-item' :packageInfo = "packageInfoOne"></Gift> </swiper-item> <swiper-item> <Wlk class='wlk-item' :serviceInfo="serviceInfoOne"></Wlk> </swiper-item> <swiper-item> <Change class='change-item1' @purches="onPurches" :transactionInfo="transactionInfoOne" :img="gameInfo.thumb_img"></Change> </swiper-item> </swiper>
js中操作
mounted中:
var compHei = uni.createSelectorQuery().in(this); compHei.select('.wrapper').boundingClientRect(data=>{ this.componentHeight = data.height console.log(that.componentHeight,'第一次进入的高度') }).exec()
watch中
currentTab(newVal,oldVal) { if(newVal==0) { var compHei = uni.createSelectorQuery().in(this); compHei.select('.taoqilai').boundingClientRect(data=>{ this.componentHeight = data.height console.log(this.componentHeight,'计算的简介的动态高度') }).exec() } if(){} if(){} ... }
-
uniapp swiper组件添加点击事件
2021-04-07 13:41:13swiper circular duration="1000" interval="5000" autoplay> <swiper-item v-for="(item, index) in bannerlist" :key="index" @click="skip(item.url)"> <image class="loaded" :src="item.thumb"&... -
uniapp swiper Tab选项卡切换高度自适应问题
2019-10-24 10:02:08uniapp swiper Tab选项卡切换高度自适应问题 uniapp swiper Tab选项卡切换高度自适应问题 swiper需要指定固定高度,但数据是动态加载的,所以高度需要自适应。 基本思路:就是获取展示内容的高度 赋值给swiper。但是... -
uniapp swiper-item 禁止滑动的方法
2020-09-22 21:27:04起初不知道这几个方法,去uniapp官方找swiper组件的属性,想找swiper-item的禁止滑动的属性没有找到,就退而求其次新建了一个页面(本来这个页面还是在swiper-item比较合理)。 今天突然看到这样一个帖子:... -
uniapp swiper轮播图自适应高度问题
2021-01-05 11:59:20先来讲下主体思路:每个tab页(swiper-item)都嵌套在swiper中,swiper-item中在放置一个scroll-view,实现超出部分滑动;即让swiper、scroll-view高度都占满屏幕剩余部分 <–template部分–> 这里的:style="{... -
【uniapp】swiper 添加click事件
2020-08-12 16:33:34关于uniapp多端:用uniapp对多端的支持不一致,适配工作很繁琐 swiper的click事件在多端上,添加方法就不一样 swiper代码 <swiper class="swiper-box" @change="change" :current="current" :autoplay="true" &... -
uniapp swiper公告横向+纵向滚动
2020-06-27 11:48:06vertical: false=横向滚动 true=横向滚动 <view class="notice" v-if=...swiper class="swiper-nav" :circular="true" :vertical="false" :autoplay="true" :interval="1000" :duration="1000 -
uniapp scroll swiper 简单布局
2020-05-10 20:57:34uniapp 简单布局 <template> <view class="content"> <view class="new_box" v-if="showHeader"><text>固定区域</text></view> <scroll-view class="scroll-view_H" ... -
【uniapp】swiper组件高度自适应问题
2020-04-22 10:21:04场景 使用uniapp中的swiper组件进行轮播,发现swiper组件高度是在外层有个固定值,并没有去适配里面的雷蓉 -
uniapp 解决swiper Tab选项卡切换高度自适应问题
2019-09-20 16:43:40uniapp 解决swiper滚动高度自适应问题 问题描述:使用的是uniapp 官网案例中的一个swiper插件(插件名:uni-swiper-dot),当需要tab滚动,但是它又只能在最外层的swiper处设置一个固定的高度,纠结很久以后,终于想... -
uniapp swiper内有点击事件时会触发 swiper的animationfinish事件
2021-03-30 09:35:51@click 改成 -
uniapp swiper高度自适应的100%完美解决方案
2020-02-08 21:24:42onReady() { //swiper高度自适应 this.getElementHeight('.swiper-item2') }, methods:{ getElementHeight(element) { setTimeout(()=>{ ... -
uniapp-【swiper】
2021-03-22 15:20:22不能动态变更) easing-function String default 指定 swiper 切换缓动动画类型,有效值:default、linear、easeInCubic、easeOutCubic、easeInOutCubic 微信小程序 @change EventHandle current 改变时会触发 ... -
uniapp中swiper内嵌video组件的坑
2020-09-29 11:19:12uniapp中swiper内嵌video组件的坑功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建... -
uniapp swiper如何自适应高度占满屏幕剩余高度
2020-08-21 11:30:42屏幕总高度减去当前swiper 距离顶部得位置 剩余的赋值给swiper高度 让scroll-view scroll-y 溢出可以滚动 html 代码 <swiper class="swiperss" :current="activeIndex" @change='tabchange' :style="{height:... -
uniapp中swiper组件禁止上下滚动
2021-01-18 18:33:45swiper使用position: absolute;绝对定位,然后再覆盖一层<view></view>。 方法二: 给<swiper-item>加事件 <swiper-item @touchstart.stop="catchTouchMove"> <view>.........</... -
uniapp tab+swiper模板
2020-05-15 13:49:47"> (item, index) in 50" :key="index"><view class="rizhi_box">123view>block> scroll-view> swiper-item> swiper> view> template> <script> import Vue from 'vue'; import tabControl from '@/components/... -
【uniapp】swiper 自定义轮播图指示点
2020-12-04 14:09:44uniapp官方推荐的swiper组件,该组件能够更换轮播图指示点,比如这样: 插件地址: https://ext.dcloud.net.cn/plugin?id=284 这里想说的是,在微信小程序发现该组件有时在切换图片时会有抖动现象(一直在高速反复... -
给uniapp的swiper添加左右翻页按钮
2020-07-16 15:08:32swiper class="swiper" :current="curDot" @change="swiperChange"> <swiper-item v-for="(item, index) in list" :key="index"> <view class="swiper-item uni-bg-red">{{item}}</view> &... -
关于uniapp使用swiper及swiper-iteam及scroll-view上下滑动及宽高问题(一)
2020-02-18 17:01:26在uniapp中使用swiper必须要设置高度,一般都是动态设置。 一种是 高度 * 数量,这里不做详解。 另一种是 swiper + scroll-view 组合,获取系统高度 在此高度中滑动,这里要说的就是第二种。 swiper 绑定一个高度 ... -
uniapp swiper 展示前一项、后一项
2020-08-26 20:04:53开发小程序的焦点图时,我们喜欢使用小程序提成的swiper来实现,多个图片时希望能够漏出一点下一项: previous-margin 、next-margin 但是还是需要注意一下细节 swiper-item 的宽度不要手动设置,让它自适应(人家...
收藏数
183
精华内容
73