uni-app:使用uni-list显示列表数据之一(hbuilderx 3.6.18)

一，演示代码:

说明：演示代码中实现的功能：

        1，各个列表项展示不同类型的内容

        2，取消uni-list-item默认样式中的padding

        3,  取消uni-list-item默认样式中的border

<template>
    <view>
        <uni-list >
            <uni-list-item :border="false" v-for="(item, index) in itemList" :key="index">
                <template v-slot:body >
                    <view @click="goItem(item.id)" v-if="item.id==5" style="border-radius: 20rpx; min-height:160rpx;margin-top:20rpx;width:690rpx;margin-left:30rpx;margin-right:30rpx;background: #ffeeee;display: flex;flex-direction: row;" >
                      <image style="width: 100%;" mode="aspectFit" src="https://img.lhdtest.com/ware/sowhatimg/ware/orig/2/39/39383.jpg" />
                    </view>
                    
                    <view @click="goItem(item.id)" v-else style="border-radius: 20rpx; min-height:160rpx;margin-top:20rpx;width:690rpx;margin-left:30rpx;margin-right:30rpx;background: #efefef;display: flex;flex-direction: row;" >
                        <view style="width:490rpx;padding-left: 20rpx;padding-right: 20rpx;">
                            <view style="height:100%;width:510rpx;display: flex;flex-direction: column;justify-content: center;">
                                {{item.title}}
                            </view>
                        </view>
                        <view style="width:200rpx;display: flex;flex-direction: column;justify-content: center;">
                            {{item.author}}
                        </view>
                    </view>
                </template>
            </uni-list-item>
        </uni-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                itemList:[],   //列表项数组
            }
        },
        methods: {
            //跳转到详情页
            goItem:function(id) {
                alert(id);
            },
            
            //访问接口
            getList:function() {
            uni.request({
                url:'/api/item/list',
                method:'get',
            }).then((result)=>{
                let [error,res] = result;
                //result将返回一个数组[error,{NativeData}]
                if(res.statusCode === 200){
                    console.log(res.data);
                    this.itemList = res.data.data.list;
                    console.log(this.itemList);
                }
                if(res.statusCode === 404){
                    console.log('请求的接口没有找到');
                }
            })
            },
            //加载时访问接口得到数据
            onl oad: function(options) {
                  // 页面创建时执行
                  console.log("页面加载");
                  this.getList();
              },
              onShow: function() {
                console.log("页面进入");
              },
              onReady: function() {
                console.log("页面首次渲染完毕时执行");
              },
              onHide: function() {
                console.log("页面离开");
              },
              onPullDownRefresh: function() {
                // 触发下拉刷新时执行
                console.log("下拉触发");
              },
              onReachBottom: function() {
                // 页面触底时执行
                console.log("下拉到底");  
              },
              onPageScroll: function() {
                console.log("页面滚动时执行");
              },
             onResize: function() {
                console.log("屏幕旋转触发");
              }
        }
    }
</script>

<style lang="scss">
    /* 取消各item的padding */
    /deep/ .uni-list-item__container {
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 0px 0px;
        padding-left: 0px;
        flex: 1;
        overflow: hidden;
    }
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

三，查看hbuilderx的版本: