微信小程序——下拉刷新+浮于图片上方的1/2

weixin_58412143

于 2022-08-01 15:58:11 发布

阅读量514

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weixin_58412143/article/details/126103095

版权

本文介绍了如何在微信小程序中实现下拉刷新功能，并详细讲解了配置A.is和A.json的过程。同时，还探讨了如何创建一个浮于图片上方1/2位置的组件，包括B.wxml结构、B.js逻辑处理和B.wxss样式设计。

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

下拉刷新

A.is

 //网络请求，获取数据
    getData() {
        wx.request({
            url: '',
            //网络请求执行完后将执行的动作
            complete(res) {
                //隐藏loading 提示框
                wx.hideLoading();
                //隐藏导航条加载动画
                wx.hideNavigationBarLoading();
                //停止下拉刷新
                wx.stopPullDownRefresh();
            }
        })
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        //调用刷新时将执行的方法
        this.onRefresh();
    },

A.json(也可以写在app.json里不过就是全局的

{
    "usingComponents": {
    },
    "enablePullDownRefresh": true

}

浮于图片上方的1/2

B.wxml

   <view class="img">
        <!-- <image src="../../project/img/hometopbg.jpg" /> -->
        <swiper>
            <swiper-item wx:for="{{imgUrls}}" wx:key="index">
            <view class="page">{{index+1}} / {{imgUrls.length}}</view>
                <image src='{{item}}'  />
            </swiper-item>
        </swiper>
    </view>

B.js

  data: {
        imgUrls: ['../../project/img/hometopbg.jpg', '../../project/img/hometopbg.jpg'],
    },

B.wxss

.img {
    width: 100%;
    height: 500rpx;
    background-color: #f1f1f1;
}
.img swiper{
    width: 100%;
    height: 100%;
}