loading效果
场景描述
- 为网络请求和渲染提供加载效果，提高用户体验。
- 简易加载要求。
- 实现遮罩层。
- 禁止滚动穿透。
- 自定义加载提示信息。
- 当数据请求开始，loading显示。
- 当数据更新+渲染完成，loading隐藏。
技术背景
- 微信小程序原生开发。
- 自定义组件开发。
- 4个文件。
- json（配置）+wxml（结构）+wxss（样式）+js（业务）。
- loading的设计
- 全屏覆盖，半透明背景，禁止底层操作，禁止滚动穿透。
- 加载动画。
- 加载提示信息。
- setData
- 第二个参数为回调，当setData引起的界面更新渲染完成后的回调函数。
方案解决
创建组件
- 配置设置
- json中进行自定义组件声明。
- “component”:true
- 结构
<!--component/loading.wxml-->
<view class="loading-container" wx:if="{{visible}}" catchtouchmove="true"><view class="loading-content-container"><view class="loading-spinner iconfont icon-loading"></view><text class="loading-text">{{text}}</text></view>
</view>
.loading-container {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.6); z-index: 9999;display: flex;align-items: center;justify-content: center;
}.loading-content-container {width: 500rpx;height: 300rpx;box-sizing: border-box;border-radius: 12rpx;padding: 40rpx 60rpx;display: flex;flex-direction: column;align-items: center;gap: 60rpx;
}.loading-spinner {width: 70rpx;height: 70rpx;border: 6rpx solid #eee;border-top-color: #0495aa; border-radius: 50%; animation: spin 1s linear infinite;
}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.loading-text {font-size: 33rpx;color: #ffff;font-family: 'Source Han Sans CN';
}
- 业务
- 内部自行管理显示状态，根据visible变量+wx:if指令。
- 向外部主体提供loading组件的显示和隐藏方法。
- 方法设置visible来控制loading的显示。
- 内部禁止滚动穿透，通过catchtouchmove=“true”。
- 相当于preventDefault，阻止页面滚动。在手指滑动时不能滚动。
Component({properties: {},data: {visible: false,text: '加载中...'},methods: {show(text = '加载中...') {this.setData({visible: true,text});},hide() {this.setData({visible: false});}}
});
使用组件
- 配置设置
- 在当前页面的json中进行引用声明。提供自定义组件的标签名和对应的自定义组件文件路径。
- “usingComponent”:{…}
- 获取组件实例
- 结构中使用。
- 业务中获取实例。this.loadingComponent = this.selectComponent(‘#loadingComponent’);
- loading的隐藏时机
- 在数据更新+渲染完成后隐藏。
- setData的回调。
- 注意隐藏不要在请求的finally中，否则还是会看不到loading。可以在catch串行中调用。
- 若还是有冲突，考虑使用setTimeout，预估时间，手动设定隐藏时机。
参考资料
- 自定义组件 | 微信开放文档
- 微信小程序————setData()方法的使用和注意事项-CSDN博客
小程序的图片处理
场景描述
技术背景
方案解决
背景图片
- base64
- 将图片转为base64，然后在业务中用变量存储，在结构中用内联样式设置背景图片。
- 网路链接。
- CSS样式手动调制。
- image设置
图片填充
- 对于标题类背景图片，不要求保持比例，需要能容纳标题文本。
- 设置父元素的高度。
- image设置width和height为100%。
- image的mode设置为widthFix。
图片圆角
- 图片容器设置border-radius，同时设置overflow:hidden实现圆角。
- 图片image设置width和height为100%。
参考文献
小程序首页的导航栏自定义左侧图标
场景描述
- 小程序首页的导航栏中需要自定义胶囊体所在行的左侧图标。
- 且要考虑到居中效果，即要获取胶囊体的所在行的样式。
技术背景
方案解决
- 获取胶囊体所在行的样式。
- 获取系统样式
- const menu = wx.getMenuButtonBoundingClientRect()
- const systemInfo = wx.getSystemInfoSync()
- 计算状态栏的样式
- statusWidth = systemInfo.windowWidth
- statusHeight = systemInfo.statusBarHeight,
- 计算胶囊区所在行的样式，方便居中
- buttonWidth = statusWidth
- buttonHeight = 2*（胶囊区.top - 状态栏.height）+胶囊区.height=2 * (menu.top - statusHeight) + menu.height
- 注意计算得到的是纯数值，需要加上尺度单位，如px。
参考文献
- navigation-bar | 微信开放文档
- https://juejin.cn/post/7331750841437650963
单行文本省略号未生效
场景描述
技术背景
- 省略号的样式规则
- width/max-width;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- flex布局
方案解决
- 生效条件。需要能触发内容溢出。
- 当display为flex，flex会改变元素的宽度计算逻辑，text-overflow: ellipsis 所需的 “内容溢出” 条件不满足，不会生效。
- 需要有明确的最大宽度或宽度。
参考文献
结构规则
- view标签和block标签
- v-for循环时
- view会参与循环。 是一个组件，会在页面上做渲染。
- block不会参与循环。仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。
样式规则
- rpx使用。
- box-sizing盒模型
- 小程序中默认盒子模型为content-box。
- 即当前元素总宽度=内容宽度width+padding+border。
- 设置当前view的盒子模型为border-box。
- 表示当前view的总宽度=内容宽度width+padding+border。不包括margin，且这种盒模型不能继承给子元素。
- 若设置当前元素的左右边距，结合calc。如box-sizing: border-box; width: calc(100% - 40rpx);
- 注意calc(100% - 40rpx);中写好空格，不能是calc(100%-40rpx);
- 前后没有空格，浏览器无法解析，导致 width 被当作 100% 处理（等于父容器宽度）。
参考文献
