今天给大家带来微信小程序列表页样式布局之专家人物简介制作教程，列表页主要适合教育行业人物类介绍页面。制作以后效果图如下：
一、wxml页面代码如下：
<view class="content">
<navigator url="/pages/teacherlist/teacherlist" hover-class="navigator-hover" class="con-teacher">
<view class="con-tr">
<image src="{{trimg}}" class="con-trimg"></image>
</view>
<view class="con-info">
<view class="coin-name">姓名姓名</view>
<view class="coin-info">讲课风格：简介简介简介简介简介简介简</view>
</view>
</navigator>
<navigator url="url" class="con-teacher">
<view class="con-tr">
<image src="{{trimg}}" class="con-trimg"></image>
</view>
<view class="con-info">
<view class="coin-name">姓名姓名</view>
<view class="coin-info">讲课风格：简介简介简介简介简介简介简</view>
</view>
</navigator>
<navigator url="url" class="con-teacher">
<view class="con-tr">
<image src="{{trimg}}" class="con-trimg"></image>
</view>
<view class="con-info">
<view class="coin-name">姓名姓名</view>
<view class="coin-info">讲课风格：简介简介简介简介简介简介简</view>
</view>
</navigator>
</view>
|
二、wxss样式页面代码如下：
.con-teacher{
display: flex;
flex-direction:row;
width:90%;
height:320rpx;
border: 2rpx solid #eeeeee;
padding:10rpx 10rpx;
margin:10rpx auto;
}
.con-trimg{
width:260rpx;
height:290rpx;
margin:15rpx 20rpx;
}
.con-info{
margin:15rpx 20rpx;
overflow: hidden;
font-size: 32rpx;
font-family: "微软雅黑";
color:#606060;
}
.coin-info{
line-height: 60rpx;
font-size: 28rpx;
}
|
三、js样式文件代码如下：
//teacher.js
//获取应用实例
var app = getApp()
Page({
data:{
trimg:'http://img.xdf.cn/TeacherIMG/2011/20110412/TCCQ09120110412170811_big.jpg'
}
})
|
.jpg)
.jpg)
