微信小程序懒加载测试

最新推荐文章于 2024-07-31 17:09:37 发布

code_susu

最新推荐文章于 2024-07-31 17:09:37 发布

阅读量407

点赞数 1

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/Lorientasn/article/details/121597800

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

wxml

<view wx:if="{{list.length==0}}" style="width: 100%;height: 100px; text-align: center;line-height: 100px;color: #bfbfbf;">空空如也</view>
<view  wx:for="{{list}}" wx:key="item">
   <image src="{{arry[index] ? 'http://cdn.lorine.cn/'+list[index].art_logo: ''}}" class="{{arry[index] ?'Action':''}}"></image>
   <view>[{{item.art_author}}]{{item.art_title}} ￥{{item.art_price}}</view>
</view>

wxss

image {
    opacity: 0;
    width: 100%;
    height: 300px;
    transition: opacity 0.4s linear 0.4s;
  }
   
  .Action {
    opacity: 1;
  }

 data: {
        list:[],
        id:1,
        damoHeight: '150',//初始高度
        arry: [false, false, false, false],

    },

   
    onPageScroll: function (res) {
        var _this = this;
        var str = parseInt(res.scrollTop / _this.data.damoHeight);
        _this.data.arry[str] = true;
        _this.setData({
          arry: _this.data.arry
        })
      },

    
     //数据
      getList(id){
        
          var token = wx.getStorageSync('token')
          wx.request({
            url: 'http://www.test.com/api/art/list?id='+id+'&token='+token,
            success:res=>{
                var list = res.data.data
                //console.log(list)
                this.setData({
                    list
                })
            }
          })
      },

     
    onLoad: function (options) {
        var id = options.id;
        //console.log(id)
        this.setData({
            id
        })

        this.getList(id)
       
          let _this = this;
          let num = Math.ceil(wx.getSystemInfoSync().windowHeight / 300);
          for (let i = 0; i < num; i++) {
            _this.data.arry[i] = true;
          };
          this.setData({
            arry: _this.data.arry
          })
        

    },