所属分类:php教程
本篇文章给大家带来的内容是关于微信小程序实例:详情页静态页面搭建的方法介绍 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
pages
目录下新建目录detail
,里面新建页面detail
:
程序员必备接口测试调试工具:立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试,同时在线协作,内容实时同步
detail.json
中先把导航栏标题文字内容改一下:{
"navigationBarTitleText": "DETAIL页面"
}
登录后复制
detail.wxml
美国队长
发布于
2018 06 12
火影村
火咖啡馆就是了疯狂关键时刻来得及公司领导看过就发上来的考试管理的风格就是的离开几个老师
登录后复制
detail.wxss
/* pages/detail/detail.wxss */
.detailContainer {
display: flex;
flex-direction: column;
}
.headImg{
width:100%;
height:460rpx;
}
.avatar_date{
padding: 10rpx;
}
.avatar_date image{
width: 64rpx;
height: 64rpx;
vertical-align: middle;
}
.avatar_date text{
font-size: 32rpx;
margin-left: 10rpx;
}
.company{
font-size: 38rpx;
font-weight: bold;
margin-left: 10rpx;
}
.collection_share_container{
position: relative;
}
.collection_share{
float: right;
margin-right: 50rpx;
}
.collection_share image{
width: 90rpx;
height: 90rpx;
margin-right: 20rpx;
}
.line{
width: 90%;
height: 2rpx;
background: rgb(226, 19, 19);
top: 45rpx;
left: 5%;
position: absolute;
z-index: -1;
}
button{
width: 280rpx;
height: 80rpx;
}
.content{
font-size: 32rpx;
text-indent: 64rpx;
margin: 50rpx 0;
}
登录后复制
效果图如下:
相关推荐:
微信小程序案例详解:页面搭建
微信小程序开发-创建欢迎页面
以上就是微信小程序实例:详情页静态页面搭建的方法介绍的详细内容,更多请关注zzsucai.com其它相关文章!