微信小程序制作上滑view

最新推荐文章于 2024-06-05 07:15:00 发布
最新推荐文章于 2024-06-05 07:15:00 发布
阅读量684 收藏 1
点赞数
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41248911/article/details/107023015
版权

微信小程序制作上滑view

首先要了解微信小程序提供的两个组件

movable-view

官方文档

movable-area

官方文档

一个前提：

movable-view必须在movable-area内

换句话说，movable-view可以在movable-area内自由控制（包括滑动，放大等）

但是实际写的时候遇到一个问题

就是movable-area会把下层的view盖住，及如果movable-area下面是input，则input无法点击

不过解决办法也比较简单

即movable-area宽度设置为1rpx

movable-view宽度这是为整个屏幕的宽度

这样即可做到既不挡着下层view，又可以滑动movable-view

下面放部分代码

wxml

<view class="page-section" style="height:{
      {
      screenHeight
最低0.47元/天 解锁文章
pzd1123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义View探究-一个简单的垂直上拉下滑View
自由奔跑的风
01-21 1522
一、简介 最近朋友公司需要实现一个垂直上拉下滑的View，该View最初只有一部分显示在屏幕最下方，上拉那一部分可以将该View全部拉出来并全部显示在屏幕上，下滑该View可以将该View隐藏在屏幕下。 先看一下最终实现效果吧。 二、实现思路 1、这个效果其实有很多实现方法，为了让松手时有一个viewpager一样的缓慢滑动的效果我选择用
微信小程序使用scroll-view 标签实现内容上下或左右滑动
湾流~ 的博客
09-05 5721
scroll-view标签微信官方介绍 scroll-view标签属性 : scroll-x 为x轴(左右滑动),scroll-y为y轴(上下滑动) 左右滑动 scroll-view标签需要设置white-space: nowrap;里面的元素要设置为行内块元素 html <scroll-view scroll-x > <view class="templateitem" v-for="(item,index) in xxx" style=" width: 200px; heig
【微信小程序开发】小程序中的上滑加载更多，下拉刷新是如何实现的？
最新发布
景天科技苑
06-05 2万+
小程序是如何实现下滑加载更多数据，下拉刷新页面的，本文就来详细探讨一下。
微信小程序 — css样式学习（实现列表区域滑动）
棒怡情的专栏
12-10 2590
如图我们要实现以下效果。列表在区域内上下滚动，查看数据。由于我们的底部tabbar是自定义的底部view.所以有底部组件的高度。如何实现： 实现思路一： 我们设置整体布局flex, 方向column，设置高度100%， 然后设置滑动部分的布局flex, 方向column,同时设置margin-bottom:(底部自定义tabbar的高度) 整体布局结构如下图： 用到的css样式： page { height: 100%; } .container { height: 10..
微信小程序——列表项上移下移效果
asteriaV的博客
07-03 3669
需要实现的效果：点击向下按钮时所选项内容和下一项内容交换，向上按钮则相反，删除按钮则点击时删除所选项那一列内容 index.wxml <view class="subject" wx:for="{{sublist}}" wx:key="index"> <view>{{index+1}}.{{item}}</view> <view class="btns"> <view class="btn up" wx:if="{{index&gt..
小程序-uni-app：scroll-view/区域滚动、下拉刷新、上拉加载更多
snowball的博客
07-24 6200
开发环境：小程序、uniapp + vue3 + ts实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：正常：下拉刷新：
微信小程序可滑动周日历组件使用详解
01-20
微信小程序可滑动周日历组件，供大家参考，具体内容如下 看网上周日历组件比较少，自己弄了一个，和大家分享一下。 如果样式变形，请检查是否有共用样式起冲突 展示一下效果图 在components组件文件夹下新建...
微信小程序代码：电影时光
06-01
8. **适配与兼容性**：由于微信小程序需要在不同型号的手机上运行，开发者需要确保代码能在不同分辨率和操作系统版本下正常工作，这涉及到适配和兼容性的处理。 9. **测试与调试**：小程序的测试包括单元测试、集成...
微信小程序-模仿QQ小程序
05-13
1. 数据绑定：微信小程序采用MVVM模式，即Model-View-ViewModel，通过数据绑定实现视图和模型的同步更新。在JS文件中修改数据，WXML和WXSS会自动响应变化。 2. 事件处理：WXML中的标签可以绑定各种事件，如点击、...
微信小程序 仿京东商城页面 仿京东商城购物页面
06-13
5. **组件使用**: 微信小程序提供了多种内置组件，如视图容器（view、scroll-view）、基础内容（text、image）、表单组件（button、input）等。开发者可以组合这些组件，构建出复杂的页面布局和交互效果。 6. **...
微信小程序：图片拼图小程序源码
05-28
微信小程序是一种轻量级的应用开发平台，主要针对移动端，它允许开发者通过微信生态系统提供便捷的服务。这款"图片拼图小程序源码"是一个专门用于创建图片拼接和图形模板编辑的应用程序，适合那些对图像处理有兴趣...
微信小程序——input格式 & 移动拖拽视图-movable-view & tabbar页面跳转
Ticky的博客
08-11 987
I）input输入框 &lt;view class="section__title"&gt;2.联系电话:&lt;/view&gt;     &lt;input name="username" type="number" maxlength="11" bindinput="inputPhoneNum" placeholder="如：188******95/
微信小程序可移动悬浮按钮 movable-area movable-view 的使用
T3165919332的博客
06-25 1986
2.在movable-area内部添加一个movable-view实现自由滑动,如下。1.将整个屏幕用movable-area组件覆盖。
微信小程序——监听页面滑动（二）判断用户在做向上滑动还是向下滑动（onScrollPage scroll-view）
XSL_HR的博客
06-01 5187
手把手教你通过监听页面滑动判断用户是在上滑还是在下滑
微信小程序使用scroll-view实现视图滚动
improvement
11-16 1677
微信小程序使用scroll-view实现视图滚动 1、设置横向滚动 给scroll-view添加scroll-x="true"属性。 给scroll-view添加white-space:nowrap;样式。 给scroll-view中的子元素设置为display:inline-block;。 示例代码如下： wxml代码： <scroll-view class='scroll-x-view' scroll-x='true'> <view class='scroll-view-ite
小程序上滑下滑效果
qq_41180335的博客
01-24 4384
首先上视频 ，csdn上传视频还要上传到腾讯视频或者B站才能发，太捞了，视频之前录好了，弄成gif图将就看吧。 就像图里展示的那样，我要的是这种效果，滑动一下就进入下个页面，而不是划一下就动一点点。 H5营销页面倒是很经常能看到这种效果。 本人前端菜鸡，百度了好久，都是什么touchstart和touchend，还有轮播图的实现效果。 但是我之前用过touchstart和touchend，感觉其实体验很不好。 在我的手机上能体现出明细的卡顿效果，有的时候还不生效，可能是在提醒我可以换手机了。 轮播图的
微信小程序分页效果实现
阵雨的博客
12-13 9868
index.js // pages/bianmin/bianmin.js var p = 0 var GetList = function (that) { wx.request({ url: url, method: "POST", data: { page: p }, header: { 'content-type': 'a
小程序自定义导航标签上滑展示下滑隐藏
x_Yanger的博客
10-28 1515
(1)首先在page上方定义一个全局变量 let tagAnimationCopy; (2) 在onLoad里面创建一个动画 onLoad:function(option) { tagAnimationCopy = wx.createAnimation({ duration:200, timingFuntion: 'ease', }) this.animation2 = tagA...
小程序——下拉刷新，上滑更新 事件记录
weixin_45464486的博客
10-14 472
打开微信开放平台： 框架-全局配置-window1.backgroundColor 窗口的背景色2.backgroundTextStyle 默认值：dark 下拉 loading 的样式，仅支持dark/light3.enablePullDownRefresh 是否开启全局的下拉刷新。默认false设置为true4.onReachBottomDistance页面上拉触底事件触发时距页面底部距离，单位为 px。默认50设置60以上配置要写在json文件中然后去框架-框架接口-页面-page-
微信小程序设计毕业答辩.pptx
05-16
"微信小程序设计毕业答辩.pptx 涵盖了小程序的基本概念、开发与使用流程，以及具体的案例展示和学习总结。" 在【标题】"微信小程序设计毕业答辩.pptx"中，我们可以了解到这是一个关于微信小程序设计的毕业答辩材料...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值