微信小程序显示loading效果,微信小程序节流效果,微信小程序生命周期,微信小程序组件的创建与使用

本文介绍了微信小程序中实现显示loading效果的方法,以及如何实现上拉触底的节流效果来优化加载。此外,详细讲解了小程序的生命周期函数,WXS(微信版JS)的特性和使用,以及如何创建和使用自定义组件。同时强调了WXSS的作用范围和组件样式隔离。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、显示loading效果

        文档地址:wx.showLoading(Object object) | 微信开放文档

        请求前 显示loading 效果,请求结束后隐藏loading

// 在请求模块中
wx.showLoading({
 title: '加载中'
})
当请求完成后,关闭加载
    wx.request({
      success: ()=>{ // ... }
      complete() {
        setTimeout(() => {
         // 这里延时一秒钟看到效果,关闭加载中效果
          wx.hideLoading()
        }, 1000)
      }
    })

 二、上拉触底节流效果

        下拉触底需要时间比较长,但是可能会一直进行请求,我们可以设置一个 加载状态,用来控制什么时候 才可以加载

        当我们loading 效果为true 的时候 证明上次加载还没有结束,所以不进行加载

// js文件
data: {
  colorList: [],
  // 设置加载状态
  isLoading: false
},
  getColorList() {
    // 请求开始 设置加载时状态为true
    this.setData({
      isLoading: true
    })
    wx.request({
      // url ...
      // success ...
      complete: () => {
        wx.hideLoading()
        // 请求结束后关闭加载效果
        this.setData({
          isLoading: false
        })
      }
    })
  },

三、小程序生命周期

        文档地址:App(Object object) | 微信开放文档

1、页面生命周期函数

// 页面的 .js 文件
Page({
  onLoad: function (option) { }, // 监听页面加载,个页面只调用1次function
  onShow: function () { },       // 监听页面显示
  onReady: function () { },      // 监听页面初次渲染完成,一个页面只调用1次
  onHide: function () { },       // 监听页面隐藏
  onUnload: function () { }    // 监听页面卸载,一个页面只调用1次
})

2、全局小程序生命周期函数

// app.js 文件
App({
  // 小程序初始化完成时,执行此函数,全局只触发一次。可以做一些初始化的工作。
  onLaunch: function (options) { },
  // 小程序启动,或从后台进入前台显示时触发。
  onShow: function (options) { },
  // 小程序从前台进入后台时触发。
  onHide: function () { },
})

四、WXS(微信版 Js)

        文档地址:WXS | 微信开放文档

        1、WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。

        2、WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致,不能使用ES6语法,例如:解构、const、let、箭头函数等

        3、由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

        4、他不能作为事件处理函数,基本上都是使用当作过滤器

1、基础变量和应用页面

 在wxml中进行 合写

// 显示在页面上
<view>{{m1.a}}</view>
<view>{{m1.toUpper('aaa')}}</view>

// 声明模块名称
<wxs module="m1">
  var str = 'abc'
  // 必须导出
  module.exports = {
    a: str
  }
  // 声明函数
  module.exports.toUpper = function(val){
    return val.toUpperCase() // 转换为大写
  }
</wxs>

引入模块使用

// .wxml
<view>{{m2.name}}</view>
<view>{{m2.toLower('BBB')}}</view>

// 引入并命名
<wxs module="m2" src="/utils/tools.wxs"></wxs>
var name = '外部引入的wxs'
module.exports.name = name
module.exports.toLower = function (val) {
  return val.toLowerCase() // 转换为小写
}

五、组件的创建与使用

        1、创建组件

        

        2、组件注册及使用

         指南-使用方法     文档地址:自定义组件 | 微信开放文档

         框架-components文档地址:Component(Object object) | 微信开放文档

           全局注册

             在app.json中进行注册

  "usingComponents": {
    "com-b":"/pages/comb/comb"
  }

           局部注册

             在使用的页面中的json 文件中 与page 平级注册

  "usingComponents": {
    "com-a":"/pages/coma/coma"
  }

应用页面上

<com-a></com-a>
<com-b></com-b>

3、WXSS作用范围

注意:

        1. 操作组件样式时,只使用类名样式

        2. 组件的样式默认有隔离行(scoped),页面的类样式无法作用到组件中;组件的样式,默认无法作用到页面中

        3. 不要使用 属性选择器、标签选择器、id选择器操作组件中的样式

手动调整 wxss 的作用范围

在组件中的js文件中 添加options 配置 自定义组件 | 微信开放文档

Component({
    // isolated:  页面与组件样式相互隔离(默认)
    // apply-shared:  页面与组件的样式相互作用
    // shared:  页面的样式会作用到组件,组件的样式不会作用到页面

  options:{
      styleIsolation:"isolated"  // 默认
  },

  // ...
})

4、声明事件与数据

        与页面一致,使用data对象中存储数据,但是方法需要在method中声明

// coma.js
  data: {
    msgComA: 'comA的私有数据'
  },
  methods: {
    comaHandel(e){
      console.log('e',e);
      console.log(this.data.msgComA);
    }
  }

5、向组件传递数据

// 页面文件
<com-b str='传递的str数据' ></com-b>

// 组件js文件 类似于vue 的props
properties: {
  str:String
},

它可以像data里面的数据一样通过 setData 来进行修改

<think>好的,我需要解决微信小程序中购物车加减按钮因图片加载导致的交互问题。首先,用户提到的问题是图片加载可能影响按钮的点击体验,可能的原因包括图片加载延迟、占位符缺失或布局抖动。 根据引用[1]提到的scaleToFill默认不保持纵横比,可能导致图片拉伸变形,影响按钮外观。不过用户的问题更多是交互响应,可能图片未加载时按钮区域空白,用户难以点击。所以需要确保即使图片未加载,按钮仍可操作。 可能的解决方案包括: 1. 使用占位图或背景色:在图片加载前显示占位符,保持按钮的可点击区域。这样用户知道按钮位置,即使图片未加载完成也能点击。 2. 预加载图片:提前加载加减按钮的图片,避免延迟。微信小程序可以使用wx.loadImage或image组件的lazy-load属性,但需要确认是否适用。 3. 使用CSS固定按钮尺寸:设置image组件的固定宽高,防止布局抖动。这样图片加载前后按钮大小不变,用户点击位置稳定。 4. 优先加载关键图片:确保加减按钮的图片优先加载,可能通过调整资源加载顺序或使用缓存机制。 5. 使用矢量图标代替图片:用icon组件替代image,矢量图标加载快且不受缩放影响,提升体验。 另外,引用[2]提到npm构建和监听器watcher,可能需要通过监听图片加载状态来更新按钮状态。例如,在图片加载完成前显示占位符,加载后替换为实际图片。 还需要考虑代码实现,比如在wxml中为image组件添加加载完成的事件处理,设置占位背景,或者使用flex布局保持按钮位置稳定。同时,测试不同网络情况下的表现,确保优化措施有效。</think>### 微信小程序购物车加减按钮交互优化方案 **问题分析** 购物车加减按钮的图片加载延迟可能导致以下问题: 1. 按钮布局抖动:图片未加载时区域空白,加载后突然撑开,导致点击位置偏移[^1] 2. 点击失效:图片加载过程中,按钮有效点击区域未形成 3. 视觉闪烁:图片加载前后的布局突变影响用户体验 **解决方案** 1. **固定容器尺寸** 为图片容器设置固定宽高,保持布局稳定性: ```css .btn-container { width: 40rpx; height: 40rpx; position: relative; } ``` 2. **加载占位背景** 使用渐变色背景作为占位符,提升视觉连续性: ```wxml <image src="{{btnImage}}" mode="aspectFit" class="btn-image" style="background: linear-gradient(135deg, #eee 25%, #fff 50%, #eee 75%);"> </image> ``` 3. **优先加载策略** 在`onLoad`生命周期预加载关键图片: ```javascript Page({ onLoad() { this._preloadImages([ '/images/icon-add.png', '/images/icon-minus.png' ]) }, _preloadImages(urls) { urls.forEach(url => { wx.preloadImage({ url }) }) } }) ``` 4. **矢量图标替代方案** 使用小程序原生`<icon>`组件(需引入weui组件库): ```wxml <icon type="circle" size="20" color="#07c160" bindtap="addItem"/> ``` 5. **交互状态管理** 添加加载状态监听和点击反馈: ```wxml <image bindload="imageLoaded" binderror="imageError" bind:tap="handleTap" data-index="{{index}}" class="btn-image {{isLoading ? 'btn-loading' : ''}}"> </image> ``` ```javascript Page({ data: { isLoading: true }, imageLoaded() { this.setData({ isLoading: false }) }, handleTap(e) { if (this.data.isLoading) return // 执行加减操作 } }) ``` **注意事项** 1. 对频繁操作的加减按钮添加节流控制 2. 为视觉障碍用户添加`aria-label`描述 3. 使用flex布局保持按钮对齐稳定性: ```css .cart-item { display: flex; align-items: center; gap: 16rpx; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值