方案说明：方案1：整个页面滚动，滚动至某个位置fixed图中“顶部box2”,分页页面触底加载方案2：页面高度为屏幕高度，商品部分使用scroll-view，scroll-view初始高度为屏幕高度-顶部高度，只滚动scroll-view。 思路说明： 1 将整个页面分为上下两部分，整个页面高度100vh（原因1：scroll-view高度需要固定高度；原因2：出现两个滚动条） 2 页面上半
简介小程序某项目中有个需求：用户进入聊天页，自动到最底部，发送（接收）新消息也到最底部。 由于本身是小程序，且有支持的方法了，所以没有采用计算内容的高度，通过设置 scroll-top 的值，达到效果的方法（代码 冗余没必要）。 小程序API中有scroll-view标签组件，该组件有个方法：scroll-into-view（值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方
欢迎点击「算法与编程之美」↑关注我们！本文首发于："算法与编程之美"，
原创
2022-03-01 15:33:03
1560阅读
在小程序弹窗时，外部页面禁止滚动， 可以在最外部容器设置catchtouchmove但是如果弹窗内部也需要滚动，
原创
2022-07-06 16:38:45
701阅读
案例描述微信小...
原创
2021-06-30 10:47:42
1407阅读
使用小程序的scroll-view组件实现列表页 scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧!为app导入新page页面首先需要为我们的小程序导入新的page页面,项目根目录打开app.json这个项目配置
# 微信小程序iOS隐藏页面滚动条的方法
在微信小程序中，用户体验至关重要。对于一些需要展示内容但又不希望干扰用户视觉体验的页面，隐藏滚动条是一项很重要的功能。本文将介绍如何在iOS环境下隐藏微信小程序的页面滚动条，并提供相应的代码示例和详细步骤。
## 为什么要隐藏滚动条
在某些情况下，滚动条可能会影响页面的美观或用户的注意力。例如，当你设计一个以图片或视频为主的内容页面时，显示的滚动条可
最近在学习微信小程序，所以把一些重点给记录下来 废话不多说，先来一波效果图： gif动图太小了 这边再来几张图片 重点说明 本接口数据来源于玩Android开放api 地址：https://www.wanandroid.com/ 详细功能介绍： 上边是一个可滑动的横向分类栏 下面是点击分类栏切换到的界面以及下边可滑动改变当前页面数据，以及数据在请求数据时加载时间过长，所以将已加载过的数据进行本地化
微信小程序之认识小程序页面，持续更新【微信小程序】系列
原创
精选
2022-09-30 06:26:20
10000+阅读
点赞
微信小程序实现滑动选项卡关于“如何做小程序的滑动式Tab选项卡，方法是什么”, 有一些人不是很理解，今天简单实现一下小程序的滑动选项卡。效果如下图所示： 这种设计结构其实在移动端是非常常见的设计，无论是h5 , app 还是 小程序，今天我们就用微信小程序来实现这个功能组件。首先我们可以把这个分成上下两部分结构，上面可以点击切换的 tab 标签和下面能切换的视图。首先我们分析上面，其实对于前端同学
我们有时会需要让页面自动滚动到某个位置（比如点击顶部的目录，滚动到下面对应内容的位置），那么在小程序中我们应该怎么做呢？做法1.使用wx.createSelectorQuery().select().boundingClientRect()查询到需要滚动到的元素位置
2.使用wx.pageScrollTo()将页面滚动到对应位置复制代码官方文档wx.createSelectorQuery()官方文
转载
2021-01-31 20:27:12
1330阅读
2评论
JS data: { // 初始化滑动条数据 menuIndex:0, // 每个菜单的宽度 onlyWidth: 70, // 右侧的margin marginWidth:10, // 菜单总长 menuWidth:0, lists:[ { list: 'a1' }, { list: 'a2' }
转载
2017-12-05 09:11:00
162阅读
# 解决微信小程序 iOS 如何滚动的问题
在开发微信小程序时，我们经常会遇到需要实现滚动功能的情况，特别是在 iOS 设备上。在 iOS 设备上，由于系统的限制，有时候可能会出现滚动不流畅或者无法滚动的情况。下面我们就来介绍一种解决这个问题的方案。
## 方案概述
我们可以通过在小程序中使用一个特定的 CSS 样式来解决 iOS 设备上的滚动问题。这个样式可以让小程序在 iOS 设备上实现
场景描述添加自定义的弹出框后，当滚动鼠标时下边的页面也会跟着滚动。解决方案为了在遮罩出现的时候禁止用户滑动页面，如下处理：给这个遮罩层 绑定事件： 使用 catchtouchmove（1）在弹出层上添加 catchtouchmove=’true’<!--弹出框 --><view class="sh_Model_box" catchtouchmove='true'>...</view>（2）也可以绑定有一个空事件 <view cat
原创
2021-06-07 17:36:18
5322阅读
点赞
一、分析歌词结构： [00:00.00]虎二 - 窗 [00:00.28]作词：虎二 [00:00.43]作曲：虎二 [00:00.58]编曲：虎二、姚瀚霄@骁Studio [00:00.88]制作人：闫骁男@骁Studio .... 结构：时间+歌词 二、包装歌词： [{time: "0.00", ...
转载
2021-09-30 15:07:00
1461阅读
2评论
微信小程序滚动Tab选项卡：左右可滑动切换 最终效果如上。问题： 1、tab标题总共8个，所以一屏无法全部显示。 2、tab内容区左右滑动切换时，tab标题随即做标记（active）。 3、当active的标题不在当前屏显示时，要使其能显示到当前屏中。 一、wxml结构 tab标题因一排八个，所以使用 scroll-view组件，使其可横向滚动。 
生命周期：onLoad()，onShow()，onReady()，onHide()，onUnload()， onUnload()事件不会发生在tabbar页面之间，只会发生在各个子页面间或者子页面和tabbar页面间。onLoad()事件只在页面第一次进入时触发，后续进去触发onShow()而不是o ...
转载
2021-09-14 17:15:00
184阅读
2评论
先上案例最终效果： 案例实现功能：1.导航栏横向滚动效果2.当前元素有下划线标识3.点击元素，导航栏滚动到相应位置 以下将分步骤逐步完善陈述这些功能，最终会呈现所有代码 1.引用组件scroll-view，达到滚动效果万丈高楼平地起，首先要达到横向滚动的效果wxml<view>
<scroll-view scroll-x="true" enabl
转载
2023-08-29 18:42:11
281阅读
你是否还在辛辛苦苦地码代码，特别是前端页面的编写，很多都是非常简单的，但界面多了还是要花费大量的时间，缩短了你陪男/女朋友的时间，家人的时间，休闲的时光。 微信小程序前端开发者工具将大大地为您节省开发时间，让你有更多的时间陪伴家人和朋友。这是一款根据效果图像画画一样来设计微信小程序，自动生成导出前端页面的快速开发工具。可以很方便、快速地生成小程序的wxml,wcss,js文...
转载
2021-06-18 11:39:02
487阅读
onShareAppMessage: function () { return { title: '微信小程序联盟', desc: '最具人气的小程序开发联盟!', path: '/page/user?id=123' //path什么参数也不传递，默认就是当前页面的链接 } }
转载
2017-10-18 11:28:00
211阅读
2评论
