苏州网站建设分享使用uni-app编译小程序列表样式

使用开发工具：HBuilderX

在<template> ... </template>之间写入以下代码：

<!-- 热装楼盘 -->
<view class="index-hot">
    <hmy-index-part-title partTitle="热装楼盘" partDesc="累计研发2000+户型解析"></hmy-index-part-title>
    <view class="index-hot-items">
        <view class="container">
            <view class="item" v-for="(item,index) in buildingItems" :key="index" @click="getBuildingDetail(item,index)">
                <view class="thumb-img">
                    <!-- <image :src="item.images[0]" mode="aspectFill"></image> -->
                    <!-- <u-lazy-load :image="item.images[0]" height="340" img-mode='aspectFill' threshold="500"></u-lazy-load> -->
                    <u-image :src="item.images[0]" height="340" mode="aspectFill"></u-image>
                </view>
                <view class="item-con">
                    <view class="item-con-title">
                        <text class="c-line-clamp c-line-clamp1">{{item.title}}</text>
                    </view>
                    <view class="item-con-rt">
                        <view class="item-con-rt-icon thumb-img">
                            <image src="@/static/images/icon-shuazi.png" mode="aspectFit"></image>
                        </view>
                        <view class="item-con-rt-text">服务:{{item.reserve}}户</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="index-more-box">
        <view class="container">
            <navigator url="/pages/building/index" hover-class="none">
                <view class="more-btn">查看更多</view>
            </navigator>
        </view>
    </view>
</view>

在<script> 。。。 </script>加入以下代码：

export default {
    data() {
        return {
            // 热装楼盘
            buildingItems:[]
        }
    },
    onLoad() {
        this.getBuildings()
    },
    methods: {
        // 热装楼盘
        getBuildings(){
            this.$api.building.getList({
                limit:4
            }).then((res)=>{
                this.buildingItems = res.data.data
            })
        },
        // 热装楼盘详情
        getBuildingDetail(e,index){
            const params = {
                _id:e.id,
                title:e.title,
                images:e.images,
                click:e.click,
                cases_number:e.cases_number,
                construction:e.construction,
                reserve:e.reserve,
                signing:e.signing
            }
            // console.log(params);
            uni.navigateTo({
                url:'/pages/building/detail?params='+JSON.stringify(params)
            })
        }
    }
}

在<style>。。。</style>之间加上以下代码：

// 热装楼盘
.index-hot{
	width: 100%;
	.index-hot-items{
		width: 100%;
		padding: 40rpx 0 0;
		.container{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.item{
				width: 340rpx;
				padding: 0 0 20rpx;
				.thumb-img{
					width: 100%;
					height: 340rpx;
				}
				.item-con{
					border-bottom: 1rpx solid #dcdfe6;
					display: flex;
					justify-content: space-between;
					align-content: center;
					line-height: 30rpx;
					padding: 11rpx 0 16rpx;
					.item-con-title{
						width: 160rpx;
						text{
							color: #14181a;
							font-size: 28rpx;
							font-family: $base-font-fmaily;
						}
					}
					.item-con-rt{
						display: flex;
						.item-con-rt-icon{
							width: 22rpx;
							height: 20rpx;
						}
						.item-con-rt-text{
							color: #5f5f6b;
							font-size: 22rpx;
							font-family: $base-font-fmaily;
							margin-left: 6rpx;
						}
					}
				}
			}
		}
	}
}

　　以上是苏州网站建设分享关于uni-app制作的一个案例样式，如果你也有一些新颖的想法，可以跟苏州网站建设交流下。