黑马程序员微信小程序学习总结4.样式结构与初步设置（开启下拉上拉事件，以及tabBar）

已于 2024-02-11 23:04:48 修改
阅读量64 收藏
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序
于 2024-01-31 20:45:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49936845/article/details/135961866
版权
本文详细介绍了rpx样式结构的导入方法、全局和局部样式应用，以及小程序中的enablePullDownRefresh设置、tabBar的6个组成部分和配置，包括页面上拉触底距离和图标设置，以及window节点和json属性的配置。
摘要由CSDN通过智能技术生成

目录

什么是rpx

在这里插入图片描述

样式结构与初步设置

怎样导入样式文件

在common中创建通用样式文件
在这里插入图片描述>在需要导入的样式文件加上
在这里插入图片描述

全局样式

在这里插入图片描述

局部样式

在这里插入图片描述
在这里插入图片描述

小程序的初步配置

在这里插入图片描述
对应结构:
在这里插入图片描述在这里插入图片描述
样例（没有的可以直接添加）：
在这里插入图片描述

enablePullDownRefresh（开启下拉刷新效果）

在这里插入图片描述

注意：此下拉刷新不会自动合上（后面会配置）

backgroundColor（设置下拉刷新的）

在这里插入图片描述

backgroundTextStyle（下拉刷新时的loading）

下拉刷新时的三个小圆点

在这里插入图片描述
在这里插入图片描述

设置上拉触底的距离

在这里插入图片描述

就是将页面盘满以后自动会滑动，设置下拉触底可以下拉刷新

什么是tabBar

在这里插入图片描述

tabBar的6个组成部分

在这里插入图片描述

tabBar节点的配置项

在这里插入图片描述

在list中的属性
在这里插入图片描述
如：
在这里插入图片描述
注意：首页必须在list中

设置图标：

在这里插入图片描述
图标资源文件下载
如：
在这里插入图片描述
在这里插入图片描述

页面配置

在这里插入图片描述
window节点和json中的属性（前面有提到过）
在这里插入图片描述

I Am Rex
关注
专栏目录
微信小程序实现下拉刷新和上拉加载
weixin_46382775的博客
02-23 705
不管做App和微信小程序只要是手机端的应用都离不开下拉刷新和上拉加载，这几天刚好没事，我就把以前做项目的经验拿出来给大家分享一下 1.首选我们开启首页的下拉刷新 pages/home/home.json { "usingComponents": { "prolist": "/components/prolist/prolist" }, "enablePullDownRefres...
黑马微信小程序项目实战
web18296061989的博客
03-07 1500
文章目录 1.小程序的第三方框架 2. 帮助文件 3.项目的搭建 3.1新建小程序项目 3.2搭建目录结构 3.3. 搭建项目的页面 3.4. 引?字体图标 3.5 创建tabbar页面 4. ?? 4.1. 效果 4.2 使??定义组件的?式实现头部搜索框 4.3 首页轮播图 4.4 首页分类导航模块 4.5 首页楼层模块 5. 分类页面 5.1 请求相关的数据 5.2 页面的编写 5.3 相关的样式 5.3 添加缓存 5.4 点击菜单左侧列表置顶 5.5 提取公共接口路径 6.
微信小程序上拉加载，下拉刷新功能
xrs151的博客
09-28 181
wxm文件 JS文件 外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述(https://img-blog.csdnimg.cnossprocess=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hyczE1MQ==,size_16,color_FFFFFF,t_70#pic_center)] ...
关于微信小程序下拉刷新、上拉触底方法的实现
Mr_LiangDaGe的博客
08-23 2819
关于微信小程序下拉刷新、上拉触底方法的实现
微信小程序实现上拉下拉菜单
算法与编程之美
03-13 9111
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述在使用小程序的...
微信小程序如何实现上拉刷新（即分页加载数据）？
fangqi20170515的博客
07-15 4157
enablePullDownRefresh可以写在app.json中和页面的xx.json,两者的区别是,app.json是全局型。步骤2、找到事件处理函数onPullDownRefresh重置数据，重置页码设置为1，重新请求数据；//在当前页面隐藏导航条加载动画。在当前页面显示导航条加载动画。在xxx.json文件中设置enablePullDownRefresh。wx.stopPulIDownRefresh()//停止”下拉刷新。的下拉刷新，而xx.json是单个页面的下拉刷新。.............
微信小程序学习笔记
weixin_52862941的博客
11-14 833
黑马微信小程序学习笔记。
《微信小程序开发实战》学习笔记chapter1微信小程序人门
Linn908的博客
10-22 1223
《微信小程序开发实战》黑马程序员版本的学习笔记分享。 chapter1微信小程序人门
微信小程序开发基础知识2（黑马）
最新发布
qq_51637289的博客
11-20 828
微信小程序开发基础知识2
微信小程序进阶
qq_53114527的博客
09-30 320
微信小程序进阶内容
微信小程序 上拉刷新
onion_line的博客
10-24 2563
app.js 定义全局 globalData: { userInfo: null, addText: '玩命加载中...', endText: '————— 我也是有底线的 —————', sid: '', }, 在需要的页面引用 js： /** * 页面的初始数据 */ data: { fast: [], ...
微信小程序 实现上拉加载
suny04592的博客
07-01 920
分页列表上拉加载
微信小程序下拉刷新/上拉加载更多
热门推荐
爱开车的彬哥的CSDN博客
12-19 13万+
查看文档，在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部， 在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在app.json中的设置对所有页面有效，在单独页面设置则对当前页面有效； 看一下json文件 "enablePullDownRefresh": true, 注意这里的true是布尔型而不是字符； 有...
微信小程序下拉刷新和上拉加载的实现
a_靖的博客
01-09 2万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 一： 下拉刷新 下拉刷新两个步骤就能实现。 1.在要实现下拉刷新的页面的json配置文件里面加上 "enablePullDownRefresh": true, //开启下拉刷新 "backgroundColor": "#f0145a" //设置背景颜色，如果不设置背景颜色，就看不见...
微信小程序下拉上拉分页功能实现
qi923701的博客
08-09 2万+
js //index.js const config = require('../../utils/config.js') //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: f...
微信小程序 上拉加载与下拉分页
qq_58467694的博客
03-06 925
1.下拉刷新，需要在window开启配置 "enablePullDownRefresh": true 2.在data里设置当前页为1 data: { page: 1 }, 2页面刷新展示 /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { let that = this; let page = this.data.page; //获取
让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
Shids_的博客
04-07 1万+
让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
微信小程序上拉下拉操作
weixin_48912846的博客
02-21 784
//开启上拉刷新 "enablePullDownRefresh":true, "backgroundColor":"#248067" async getDataList(){ let dataList = await wx.$get('/Subject/GetSubjects',{ pageSize:15, pageIndex:this.data.pageIndex }) //判断如果是首页，清空之前数组中的数据 if(this.data.pageIndex===1) this.dat
微信小程序上拉刷新和下拉加载2种方法实现，onPullDownRefresh，scroll-view使用
橙-极纪元-cplvfx-JJY.Cheng
10-26 2万+
这篇文章，直接开怼，代码有详细注释 onPullDownRefresh实现下拉刷新  一、获取数据 //product2获取数据 loadProduct2: function () { var that = this; wx.request(OBJECT)//发起网络请求。使用前请先阅读说明。 }, 二、下拉调用
微信小程序配置深入：app.json中的tabBar、networkTimeout与debug解析
在微信小程序的开发中，`app.json`是应用级别的配置文件，它定义了小程序的整体结构和一些全局设置。本篇主要介绍`tabBar`、`networkTimeout`和`debug`这三个配置项。 **tabBar配置** `tabBar`用于定义小程序底部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

I Am Rex

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值