公告列表
公告列表
收藏
回答

列表的性能怎样提升

一个有交互有图片的列表，20多项的时候在同事华为手机上渲染就要一秒多，只有3项的时候就零点几秒，明显快很多，有什么优化建议吗

回答关注问题邀请回答
收藏

7 个回答

  • 黄思程
    黄思程
    2017-12-13

    自定义组件里很复杂吗，麻烦提供下代码

    2017-12-13
    有用
    回复
  • 黄思程
    黄思程
    2017-12-12

    是删除了哪个组件呢

    2017-12-12
    有用
    回复
  • 菜
    菜
    2017-12-14
    // component/readCheck/readCheck.js
    const app = getApp();
     
    /**
     * 听读按钮组件
     */
    Component({
        /**
         * 组件的属性列表
         */
        properties: {
            params: Object, // 请求参数，包括objectId, objectType
            checkStatus: Boolean, // 勾选状态
            // 按钮文字
            text: {
                type: String,
                value: '完成听读'
            },
            cls: String, // 附加样式
            noHover: Boolean // 是否有选中高亮
        },
     
        /**
         * 组件的初始数据
         */
        data: {
        },
        /**
         * 组件生命周期函数，在组件实例进入页面节点树时执行
         */
        attached: function () {
     
        },
        /**
         * 组件的方法列表
         */
        methods: {
            readCheckTap: function (e) {
                if (this.data.busy) return false
     
                this.setBusy(true)
                this._doPost().then((status) => {
                    this.triggerEvent('change', { status: status }) // 广播事件
                    this.setBusy(false)
                }, (err) => {
                    wx.showToast({
                        title: '未知错误',
                        image: '/assets/images/info_grey.png'
                    });
                    console.log(err)
                    this.setBusy(false)
                })
            },
     
            // 根据状态发送请求
            _doPost: function () {
                if (this.data.checkStatus) {
                    return this._unCompleteAction()
                } else {
                    return this._completeAction()
                }
            },
     
            // 取消听读
            _unCompleteAction: function () {
                return new Promise((resolve, reject) => {
                    app.RPCService.notifyUncompleteGoal(this.data.params).then((res) => {
                        this.setData({
                            checkStatus: false
                        })
                        resolve(false)
                    }, (err) => {
                        reject(err)
                    })
                })
            },
     
            // 完成听读
            _completeAction: function () {
                return new Promise((resolve, reject) => {
                    app.RPCService.notifyCompleteGoal(this.data.params).then((res) => {
                        this.setData({
                            checkStatus: true
                        })
                        resolve(true)
                    }, (err) => {
                        reject(err)
                    })
                })
            },
     
            // 设置繁忙状态
            setBusy: function (value) {
                this.setData({
                    busy: value
                })
            }
     
        }
    })
    <!--component/readCheck/readCheck.wxml-->
    <view class='read-check {{cls}}' hover-class='{{noHover ? "" : "view-btn-hover"}}' bindtap='readCheckTap'>
        <view wx:if='{{checkStatus}}' class='check-on'>
            <view class="iconfont icon-dagou"></view>{{text}}
        </view>
        <view wx:else class='check-off'>
            <view class="iconfont icon-artboard61"></view>{{text}}
        </view>
    </view>


    另外，安卓机测试的少，他的华为手机在此列表使用scroll-view滑动快的话不顺畅。

    2017-12-14
    有用
    回复
  • 菜
    菜
    2017-12-12

    一个自定义组件

    2017-12-12
    有用
    回复
  • 菜
    菜
    2017-12-11

    刚才调试了下，删除列表上使用的一个组件可以减少很多时间。。。

    2017-12-11
    有用
    回复
  • 菜
    菜
    2017-12-11

    有id  用了wx:key='id'，但是这应该无关性能吧

    2017-12-11
    有用
    回复
  • 清泉石上
    清泉石上
    2017-12-11

    用了wx:key 吗？

    2017-12-11
    有用
    回复
请 登录 后发表内容
相关文档