精华内容
下载资源
问答
  • uniapp swiper组件

    2021-06-16 17:14:50
    https://uniapp.dcloud.io/component/swiper?id=swiper <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicatorcolor="rgba(255,255,255,0.5)" indicator-active-...

    swiper

    官网
    https://uniapp.dcloud.io/component/swiper?id=swiper

    <swiper :indicator-dots="true" :autoplay="true" 
    	  :interval="3000" :duration="1000"
    	  indicatorcolor="rgba(255,255,255,0.5)"
    	  indicator-active-color="#ff372b"
    	  class="swiper">
    	 <swiper-item>
    
         </swiper-item>
    </swiper>
    

    一些参数的解释
    indicator-dots //控制面板是否显示小圆点
    autoplay //自动切换
    interval //切换间隔的时间
    duration // 切换轮播时,话费的时间
    indicatorcolor//小圆点的默认颜色
    indicator-active-color//被选中图片对应小圆点的颜色
    interval//自动切换的间隔时间
    duration//滑动过程中话费的时间

    scroll-view

    https://uniapp.dcloud.io/component/scroll-view?id=scroll-view

    <scroll-view class="scroll-view" scroll-x show-scrollbar>
    </scroll-view> //scroll-x 控制滑动的方向
    //show-scrollbar 控制是否显示滚动条
    

    slider

    https://uniapp.dcloud.io/component/slider?id=slider

    <slider @change="sliderChange" class="line flex-item" :value="curPlayTime" min="0" 
    block-size="15" backgroundColor="rgba(255,255,255,.5)" :max="playTime" activeColor="rgba(255,255,255,.5)"/>
    

    min //最小值0
    max // 总时间,最大值
    value // 当前值
    block-size //滑块的大小,取值范围为 12 - 28
    backgroundColor //背景颜色
    activeColor // 滑块左侧已选择部分的线条颜色
    change// 滑块拖动时触发

    展开全文
  • 前言:小程序官方swiper组件并未提供带左右箭头功能,但有些时候还是想把左右箭头添加上,今天连胜老师就给大家分享一下自己的实现方式。 思路很简单:在swiper组件内部添加两个image组件,绑定点击事件,动态改变...
  • uniapp swiper高度自适应

    千次阅读 2020-09-12 09:48:23
    uniapp swiper高度自适应 一、给个class <swiper class="sw"> 二、给class给样式 .sw{ position: fixed; height: 100%; width: 100%; top:2.5rem; left: 0; } 简单吧!

    uniapp swiper高度自适应

      <swiper @change="change"  style="min-height:100vh;">
       简单吧!
    
    展开全文
  • swiper class="swiper" :style="{height: windowHeight + 'px'}" :current="currentTab" @change="onSwiperChange"> <swiper> data() { return { windowHeight: '', // 页面高度 } }, ```java

    // 布局一下高度为动态的
    在这里插入图片描述

    <swiper 
      class="swiper" 
      :style="{height: windowHeight + 'px'}"
      :current="currentTab"
      @change="onSwiperChange">
    <swiper>
    
    data() {
      return {                       
        windowHeight: '',  // 页面高度          
      }
    },
    
    methods:{
    	init() {
    	const res = uni.getSystemInfoSync();
        this.windowHeight = res.windowHeight;
    	}
    }
    
    this.$nextTick(() => {
    	//获取节点代码
    	var query = uni.createSelectorQuery();
    	//获取节点
    	      
        query.select(`.news-box-${currentTab}`).boundingClientRect(res => {
         //判断是否未true
         if (res) {
         //当前元素高度
         this.windowHeight = res.height;
         //页面高度+循环体高度等于总高度
         }
       }).exec();
      })
    
    
    
    
    展开全文
  • uniapp使用wxs如何手写swiper ** 了解wxs WXS是小程序的一套脚本语言。 具体api:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/ 官方实例:https://uniapp.dcloud.io/frame?id=wxs 创建wxs ...

    **

    uniapp使用wxs如何手写swiper

    **

    了解wxs

    WXS是小程序的一套脚本语言。
    具体api:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
    官方实例:https://uniapp.dcloud.io/frame?id=wxs

    创建wxs

    再vue文件新建script标签
    module就是自己定义的一个模块名

    结构

    html部分

    <view class="header">
    		<u-sticky offset-top="0">
    			<u-tabs :list="swiperList" active-color="#333333" inactiveColor='#666666' :is-scroll="false"
    				:current="swiperCurrent" @change="change" font-size="28"></u-tabs>
    		</u-sticky>
    		<view style="overflow: hidden;width: 750rpx;">
    			<!-- swiper -->
    
    			<!-- 移动端宽度750rpx,多少个swiper列表就*几-->
    			<!-- 这里用的是定位来实现(有些场景swiper里会用到吸顶效果,吸顶用的定位来实现,但uni用的transition来实现,transition和定位会有冲突,具体原因百度) -->
    			<!-- touch就是你定义的模块.释放的方法-->
    			<!-- :prop='swiperCurrent'wxs派发swiperCurrent方法 -->
    			<view id='swiper' style="overflow: hidden;display: flex;position: relative;"
    				:style="{'width':winWidth*2+'rpx'}" @touchstart="touch.touchstart"
    				@touchmove="touch.touchmove" @touchend="touch.touchend" :prop='swiperCurrent'
    				:change:prop='touch.change'><!-- 监听 -->
    				<!-- 组件1 -->
    				<view style="width: 750rpx;">
    					<img-list ref="one"></img-list>
    				</view>
    				<!-- 组件2 -->
    				<view style="width: 750rpx;">
    					<img-list-two ref='two'></img-list-two>
    				</view>
    			</view>
    		</view>
    	</view>
    

    wxs部分

    let startX = 0 // 触摸起始点
    	let startY = 0
    	let distanceX = 0 //结束点
    	let distanceY = 0
    	let translateX = 0 //移动x轴位置
    	let isMove = false //是否移动开关
    	let index = 0
    	let width = uni.getSystemInfoSync().windowWidth //屏幕宽度
    	//结束定位
    	function addLeft(ins, xwidth) {
    		ins.selectComponent('#swiper').setStyle({
    			'transition': 'all .3s',
    			// 'transform': `translateX(${xwidth}px)`
    			'left': `${xwidth}px`
    		})
    	}
    	//移除定位
    	function removeLeft(ins) {
    		ins.selectComponent('#swiper').setStyle({
    			'transition': 'none'
    		})
    	}
    	//移动
    	function setLeftX(ins, xwidth) {
    		ins.selectComponent('#swiper').setStyle({
    			'left': `${xwidth}px`,
    			'transition': 'none'
    		})
    	}
    	//监听外部changeSwiper方法
    	function change(newValue, oldValue, ownerInstance, instance) {
    		index = newValue
    		addLeft(ownerInstance, -index * width)
    		ownerInstance.callMethod('changeSwiper', index)
    	}
    	//触摸开始
    	function touchstart(event, ins) {
    		let touch = event.touches[0] || event.changedTouches[0]
    		startX = touch.pageX
    		startY = touch.pageY
    		// event.preventDefault();
    	}
    	//触摸移动
    	function touchmove(event, ins) {
    		let touch = event.touches[0] || event.changedTouches[0]
    		let moveX = touch.pageX
    		let moveY = touch.pageY
    		distanceX = moveX - startX
    		distanceY = moveY - startY
    		translateX = -index * width + distanceX
    		if ((distanceX < 0 && index === 0) || (distanceX > 0 && index === 1)) {
    			removeLeft(ins)
    			setLeftX(ins, translateX)
    			isMove = true
    		}
    
    	}
    	//触摸结束
    	function touchend(event, ins) {
    		let touch = event.touches[0] || event.changedTouches[0]
    		if (isMove) {
    			if (Math.abs(distanceX) > width / 4) {
    				// 切换
    				if (distanceX > 0) {
    					index = 0
    				} else {
    					index = 1
    				}
    			}
    			addLeft(ins, -index * width)
    			ins.callMethod('changeSwiper', index)
    		}
    		startX = 0;
    		distanceX = 0;
    		isMove = false;
    	}
    	//导出模块
    	module.exports = {
    		change: change,
    		touchend: touchend,
    		touchstart: touchstart,
    		touchmove: touchmove
    	}
    

    js部分(可以动态计算组件高度赋值,也可以用scroll-view)

    <script>
    	import imgList from './components/imgList.vue'
    	import imgListTwo from './components/imgList2.vue'
    	export default {
    		components: {
    			imgList,
    			imgListTwo
    		},
    		data() {
    			return {
    				winWidth: 750,
    				swiperList: [{
    						name: '0'
    					},
    					{
    						name: '1'
    					}
    				],
    				swiperCurrent: 0,
    				headerHight: 0
    			}
    		},
    		computed: {
    			//px转成rpx
    			stickyHeight() {
    				return Math.floor(Number(this.headerHight) / (uni.upx2px(Number(this.headerHight)) / Number(this.headerHight)))
    			},
    		},
    		onReady() {
    			this.$nextTick(() => {
    				
    			})
    		},
    		methods: {
    			getHight() {
    				setTimeout(()=>{
    					if (this.swiperCurrent === 0) {
    						this.headerHight = this.$refs.one.headerHight
    					} else {
    						this.headerHight = this.$refs.two.headerHight
    					}
    				},1000)
    
    			},
    			change(index) {
    				this.swiperCurrent = index
    			},
    			//wxs监听的方法
    			changeSwiper(index) {
    				this.swiperCurrent = index
    				/* if (index === 0) {
    					this.$refs.one.getHight()
    					this.headerHight = this.$refs.one.headerHight
    				} else {
    					this.$refs.two.getHight()
    					this.headerHight = this.$refs.two.headerHight
    				} */
    			}
    		}
    	}
    </script>
    

    组件

    <template>
    	<view class="list">
    		<scroll-view scroll-y style="height: 100vh;">
    			<view v-for="(item,index) in 10" :key='index'>
    				<image style="width: 200rpx;height: 200rpx;"
    					src="https://files.yzsheng.com/AccountDefaultImg/HeadPortrait.png">
    				</image>
    				<text>{{index+1}}</text>
    			</view>
    		</scroll-view>
    	</view>
    	
    </template>
    
    <script>
    	export default {
    		data(){
    			return{
    				headerHight:0
    			}
    		},
    		methods:{
    			getHight() {
    				//组件
    				this.$nextTick(() => {
    					const query = uni.createSelectorQuery().in(this)
    					query.select('.list').boundingClientRect(data => {
    						this.headerHight = data.height
    						console.log(data.height,'高度1')
    					}).exec()
    				})
    			
    			},
    		}
    	}
    </script>
    
    <style>
    </style>
    
    
    展开全文
  • 效果展示 swiper代码 //zPopup 为弹窗组件 <zPopup v-model="applyPopup...swiper class="banner_swiper" :autoplay="false" :interval="3000" previous-margin="40px" next-margin="40px" :duration="1000
  • 因为uniApp swiper组件有默认高度的150px 这时如果图片大于150px就会显示不完整,导致很丑的样式问题。 我们希望外部的swiper 自适应内部的图片高度的最大高度 怎么办? 1.先获取内部图片所有dom的元素样式 数组 ...
  • swiper使用position: absolute;绝对定位,然后再覆盖一层<view></view>。 方法二: 给<swiper-item>加事件 <swiper-item @touchstart.stop="catchTouchMove"> <view>.........</...
  • 基于uniapp swiper 模仿抖音下拉加载上拉刷新 一、html代码 <!-- 视频上滑示例 --> <view class="view_back"> <!-- banner内容 --> <view class="view_cont"> <!-- 轮播 --&...
  • swiper class="bigImg" :current="current"> <swiper-item v-for="(big,index) in imgSwiperData" :key="index"> <image :src="big.imgUrl" mode="scaleToFill"></image> </...
  • uniapp swiper快速滑动卡死疯狂轮播 解决:将@change改为@animationfinish
  • 在用uniapp做项目的时候发现tab页切换到边界的时候会漏出半个屏幕的空隙,而正常的tab切换则是滑到边界后切换到下一个选项卡,后来百度好久,终于找到了这个解决的办法 <template> <view > <...
  • Uniapp自定义swiper滑动模块

    千次阅读 2020-08-27 22:21:36
    Uniapp自定义swiper滑动模块简介参考文章上代码 简介 用Uniapp写的App端swiper滑动模块,主要是理解原理,如果后期有可能的话再优化成组件。本篇文章主要参考卧龙派的文章手把手教你用原生js来写一个swiper滑块插件...
  • uni-app采坑之路——swiper

    千次阅读 2020-04-29 18:50:15
    这里本来是要写轮播图的,明明设置好了swiper的高度值,宽度也设置成了100%,再看微信小程序和app的样式,纳尼?!!!! 竟然显示不一样!轮播图有一部分竟然没有了 解决方法: 在swiper的页面添加swiper标签的...
  • 使用scroll-view与swiper制作顶部导航 复制即可用 图: 代码: <template> <view class="container"> <view> <scroll-view class="scroll-view_H" scroll-x @scroll="scroll" :...
  • uni-app swiper轮播图

    千次阅读 2020-08-14 17:46:48
    swiper详细数据参照uni-app官方swiper属性 <!-- swiper轮播图 --> <uni-swiper-dot :info="bannerList"> <swiper class="swiper-box" autoplay="true" circular="true" indicatorDots=...
  • uni-app swiper设置自定义高度

    千次阅读 2020-01-24 17:52:42
    大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要的效果是什么呢? 1.点击tab可以切换黄色区域视图 2.滑动黄色区域改变视图,支持横向滑动以及纵向滑动 我的思路:因为...
  • 所以选项卡选择了swiper,但是swiper的高度需要预设,不能根据内容的高度撑开,因此使用了uniapp提供的获取节点属性的api来动态设置swiper的高度 setHeight(index = 0) { console.log('step2') const ...
  • swiper class="swiper-box" :autoplay="false" :current="current" @change="swiperChange"> <swiper-item class="swiper-box-item" v-for="(list,n) in questionList" :data-current="n"> <scr...
  • 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 Tab选项卡切换高度自适应问题

    万次阅读 热门讨论 2019-09-20 16:43:40
    uniapp 解决swiper滚动高度自适应问题 问题描述:使用的是uniapp 官网案例中的一个swiper插件(插件名:uni-swiper-dot),当需要tab滚动,但是它又只能在最外层的swiper处设置一个固定的高度,纠结很久以后,终于想...
  • 1)安装依赖 npm install vue-awesome-swiper –save npm run dev 2) 在main.js中引入 import VueAwesomeSwiper from “vue-awesome-swiper” import “swiper/dist/css...
  • 加到你想变换的那个vue文件里面就好... uni-swiper .uni-swiper-dot { width: 10rpx; height: 3rpx; } uni-swiper .uni-swiper-dot-active { background-color: #000; width: 40rpx; border-radius: 5rpx;
  • //swiper高度自适应 this.getElementHeight('.swiper-item2') }, methods:{ getElementHeight(element) { setTimeout(()=>{ let query = uni.createSelectorQuery().in(this); query.select(element)....
  • uniapp项目需要改变swiper指示点的样式 问题描述: 使用uniapp组件库里面的swiper组件时,发现在组件内无法使用类名对swiper的指示点进行样式修改 原因分析: 组件内无法强制修改uniapp组件库的组件(emmmmm。。...
  • uniapp-swiper

    2021-06-14 20:14:22
    uniapp-swiper坑 1.组件名称swiper.vue或者Swiper的话,在传递数据的时候有可能图片就不见了。 2.改变图片的大小要用rpx。 3.swiper组件有默认的高度为150px,app中需要改变默认高度。 解决办法给swiper组件设置...
  • 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 { ...
  • uni-app滑块视图容器swiper

    千次阅读 2019-11-02 12:09:27
    轮播图左右滑动: ...swiper :indicator-dots="true" :indicator-color="rgba(0,0,0,.3)" :autoplay="true" :interval="2000" :duration="600"> <swiper-item v-for="(item,index) in list" :key="inde...
  • uniappswiper动态赋值问题

    千次阅读 2020-07-15 14:48:51
    uniappswiper动态复制问题过程html的结构js中操作 过程 可以给组件赋class值,通过uniapp的createSelectorQuery方法动态获取高度 如果多个组件在一起,可以通过view包裹住所有组件,获取view的高度 mounted中获取...
  • <swiper :current="currentTab" class="swiper-box-list" duration="300" @change="swiperChange"> (swiperDate,index1) in swiperDateList" :key="index1"> <swiper-item> <scroll-view class="...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,358
精华内容 543
关键字:

swiperuniapp