今天给大家带来微信小程序列表页样式布局之一行两个图文列表制作教程，制作好以后效果图如下：
import numpy, sys, random, pygame
|
一、wxml页面代码如下：
<view class="appointment">
<view class="app-moduler">
<navigator url="url" class="mod-item">
<view class="mod-signup">
<image src="{{signupimg}}"></image>
</view>
<view class="mod-img">
<image src="{{imgsrc}}" class="mod-image"></image>
</view>
<view class="mod-title">
<text>标题标题标题标题标题</text>
</view>
<view class="mod-info">
<view class="mod-icon">
<image src="{{iconsrc}}" class="icon"></image>
</view>
<view class="moinfont">17人已申请</view>
</view>
</navigator>
<navigator url="url" class="mod-item">
<view class="mod-signup">
<image src="{{signupimg}}"></image>
</view>
<view class="mod-img">
<image src="{{imgsrc}}" class="mod-image"></image>
</view>
<view class="mod-title">
<text>标题标题标题标题标题</text>
</view>
<view class="mod-info">
<view class="mod-icon">
<image src="{{iconsrc}}" class="icon"></image>
</view>
<view class="moinfont">17人已申请</view>
</view>
</navigator>
<navigator url="url" class="mod-item">
<view class="mod-signup">
<image src="{{signupimg}}"></image>
</view>
<view class="mod-img">
<image src="{{imgsrc}}" class="mod-image"></image>
</view>
<view class="mod-title">
<text>标题标题标题标题标题</text>
</view>
<view class="mod-info">
<view class="mod-icon">
<image src="{{iconsrc}}" class="icon"></image>
</view>
<view class="moinfont">17人已申请</view>
</view>
</navigator>
<navigator url="url" class="mod-item">
<view class="mod-signup">
<image src="{{signupimg}}"></image>
</view>
<view class="mod-img">
<image src="{{imgsrc}}" class="mod-image"></image>
</view>
<view class="mod-title">
<text>标题标题标题标题标题</text>
</view>
<view class="mod-info">
<view class="mod-icon">
<image src="{{iconsrc}}" class="icon"></image>
</view>
<view class="moinfont">17人已申请</view>
</view>
</navigator>
</view>
</view>
|
二、wxss样式文件代码如下：
.mod-item{
width:46%;
height:300rpx;
float: left;
margin-left:20rpx;
margin-top:40rpx;
position: relative;
}
.mod-signup{
position: absolute;
}
.mod-signup image{
width:76rpx;
height:42rpx;
}
.mod-img{
width:100%;
height:180rpx;
}
.mod-image{
width: 100%;
height:180rpx;
}
.mod-title{
font-size:32rpx;
font-family: '微软雅黑';
display:flex;
height:45rpx;
margin-top:15rpx;
flex-direction:column;
justify-content: center;
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
overflow: hidden;
}
.mod-info{
display: flex;
flex-direction: column;
height:40rpx;
}
.mod-icon{
display: flex;
flex-direction: row;
width: 40rpx;
height: 40rpx;
}
.icon{
width: 40rpx;
height: 40rpx;
}
.moinfont{
font-size: 28rpx;
text-indent: 60rpx;
font-family: '微软雅黑';
color:#bfbfbf;
}
.more-info{
display: flex;
flex-direction: column;
font-size:32rpx;
font-family: '微软雅黑';
line-height: 98rpx;
text-indent: 30rpx;
color:#586C94;
}
|
三、js文件代码如下：
//signup.js
//获取应用实例
var app = getApp()
Page({
data: {
signupimg: '../../image/signup.png',
imgsrc: 'https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?searchbox_feed&quality=120&wh_rate=0&size=f648_364&ref=http%3A%2F%2Fwww.baidu.com&sec=0&di=1619440b1bc5580ece1e18c556a408d7&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D2318927072%2C2551034291%26fm%3D175%26s%3DF9E09B544C2154095A6098DF030090F1%26w%3D660%26h%3D370%26img.JPEG',
iconsrc: '../../image/usercount.png',
},
})
|
.jpg)
.jpg)
