uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
效果图:
tab栏可以滑动,切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度。
下面是代码
html
<template>
<view>
<scroll-view class="scroll1" scroll-x="true">
<view :class="currentTab==index ? 'select' : ''" :data-current="index" @click="swichNav" v-for="(item,index) in scoll"
:key='index'>{{item.txt}}
</view>
</scroll-view>
<swiper :current="currentTab" @change="bindChange" class='swp' :style="{height:aheight?aheight+'px':'auto'}">
<swiper-item>
<view class="list-item">
<view class="list" v-for="(item,index) in list" :key='index'>
<view class="list-img">
<image :src="item.imgb" mode=""></image>
</view>
<view class="list-con">
<view>{{item.tit}}</view>
<view class="list-foot">
<view>
<image src="../../static/images/user.png" mode="" class="user"></image>
<view class="username">{{item.user}}</view>
</view>
<view>
<image src="../../static/images/love.png" mode="" class="like"></image>
<view class="likenum">{{item.like}}</view>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>玻尿酸</swiper-item>
<swiper-item>水光针</swiper-item>
<swiper-item>眼部</swiper-item>
<swiper-item>鼻部</swiper-item>
<swiper-item>瘦身塑型</swiper-item>
</swiper>
</view>
</template>
js
<script>
export default {
data() {
return {
currentTab: 0,
aheight: '',
scoll: [{
txt: '精选'
}, {
txt: '玻尿酸'
}, {
txt: '水光针'
}, {
txt: '眼部'
}, {
txt: '鼻部'
}, {
txt: '瘦身塑型'
}],
}
}
onShow(){
// 动态获取滑动页面高度
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119251201
uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题的更多相关文章
- html+js(swiper.js)+css左右滑动切换页面效果,适配移动端
demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- uniapp使用swiper组件做tab切换动态获取高度
swiper对高度进行了限制,所以说通常做出了tab切换的效果但是内容经常被截取掉???? 所以我在前端做了一个动态获取高度的功能 选项卡标题也就是tab切换的效果 选项卡内容区域的高度自适应 因为进 ...
- 小程序swiper组件的bindchange方法重复执行问题
这是官方文档的说法给出了swiper组件一直来回滑动的bug原因 以下是修正方法 <swiper autoplay="{{autoplay}}" interval=" ...
- uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件 支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数 支持无限级 注意事项:插件传入数据格式为children树 ...
- NGUI系列教程十(Scroll View实现触摸滚动相册效果)
NGUI中提供了两种Scroll View 一种是通过手指或鼠标滑动视图时移动平面物体,另一种则是直接移动摄像机,他们各有各的好处.但是NGUI提供的Scroll View很难实现类似Android ...
- Unity NGUI制作scroll view
unity版本:4.5 NGUI版本:3.6.5 参考链接:http://blog.csdn.net/monzart7an/article/details/23878505,作者:CSDN 冬菊子 ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 小程序实践(二):swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
随机推荐
- echarts饼图去除圈外指向横线
series: [ { name: '实时人员信息', type: 'pie', radius: ['86%', '80%'], avoidLabelOverlap: false, label: { ...
- 小程序canvas 圆角框带填充颜色
// ctx: 获取canvas的id --- const ctx = wx.createCanvasContext('canvasId') // x 横坐标 y 纵左边 w 框的宽度 h 框的高 ...
- Java语言学习day11--7月10日
今日内容介绍1.自定义类型的定义及使用2.自定义类的内存图3.ArrayList集合的基本功能4.随机点名器案例及库存案例代码优化 ###01引用数据类型_类 * A: 数据类型 * a: java中 ...
- Elemnt ui 组件封装(form)
<template> <el-form class="form" :inline="formConfig.inline" :model=&qu ...
- python学习-Day20
目录 今日内容详细 作业讲解 re模块补充说明 findall的优先级查询 通过索引的方式单独获取分组内匹配到的数据 分组之后还可以给组起别名 split的优先级查询 collections模块 具名 ...
- XCTF练习题---MISC---easycap
XCTF练习题---MISC---easycap flag:FLAG:385b87afc8671dee07550290d16a8071 解题步骤: 1.观察题目,下载附件 2.拿到手以后发现是一个流量 ...
- Bugku CTF练习题---加密---ok
Bugku CTF练习题---加密---ok flag:flag{ok-ctf-1234-admin} 解题步骤: 1.观察题目,发现规律 2.发现所有内容都是ook写的, 直接上网搜索一下原因,发现 ...
- 机器学习-学习笔记(一) --> (假设空间 & 版本空间)及 归纳偏好
机器学习 一.机器学习概念 啥是机器学习 机器学习:假设用P来评估计算机程序在某任务类T上的性能,若一个程序通过利用经验E在T中任务上获得了性能改善,则关于T和P,该程序对E进行了学习 通俗讲:通过计 ...
- 详谈:pNFS增强文件系统架构
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 通过 NFS(由服务器.客户机软件和两者之间的协议组成) ...
- 关于 MyBatis-Plus 分页查询的探讨 → count 都为 0 了,为什么还要查询记录?
开心一刻 记得上初中,中午午休的时候,我和哥们躲在厕所里吸烟 听见外面有人进来,哥们猛吸一口,就把烟甩了 进来的是教导主任,问:你们干嘛呢? 哥们鼻孔里一边冒着白烟一边说:我在生气 环境搭建 依赖引入 ...