本文给大家带来的是微信小程序宏华净水新闻公告图文列表设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="bgGray">
<view class="newList flex align">
<view class="imgbox item"><image style="" mode="widthFix" src="../../image/ydjl_img@3x.png"></image></view>
<view class="text item">
<view class="title">这是新闻标题最新资讯这是新这是新闻标题</view>
<view class="info">
<small><image style="" mode="widthFix" src="../../image/icon_new_left_time@3x.png"></image>2017-02-15</small>
<small><image style="" mode="widthFix" src="../../image/icon_new_right_hand_default@3x.png"></image>20</small>
</view>
</view>
</view><!--productList-->
<view class="newList flex align">
<view class="imgbox item"><image style="" mode="widthFix" src="../../image/ydjl_img@3x.png"></image></view>
<view class="text item">
<view class="title">这是新闻标题最新资讯这是新这是新闻标题</view>
<view class="info">
<small><image style="" mode="widthFix" src="../../image/icon_new_left_time@3x.png"></image>2017-02-15</small>
<small><image style="" mode="widthFix" src="../../image/icon_new_right_hand_default@3x.png"></image>20</small>
</view>
</view>
</view><!--productList-->
<view class="newList flex align">
<view class="imgbox item"><image style="" mode="widthFix" src="../../image/ydjl_img@3x.png"></image></view>
<view class="text item">
<view class="title">这是新闻标题最新资讯这是新这是新闻标题</view>
<view class="info">
<small><image style="" mode="widthFix" src="../../image/icon_new_left_time@3x.png"></image>2017-02-15</small>
<small><image style="" mode="widthFix" src="../../image/icon_new_right_hand_default@3x.png"></image>20</small>
</view>
</view>
</view><!--productList-->
</view>
|
二、wxss样式文件代码如下：
.bgGray{
min-height: 100%;
display: block;
background: #f0f2f5;
padding-bottom: 10px;
border: 1px solid #ffffff;
}
.newList{
background: white;
margin-top: 10px;
padding: 0 0;
}
.newList .title{
color: #424242;
font-size: 15px;
line-height: 1.5em;
height:80px;
}
.newList .imgbox{
width: 150px;
}
.newList .imgbox image{
width: 100%;
}
.newList .text{
padding-left: 10px;
line-height:2em;
color: gray;
font-size: 13px;
flex:1;
}
.newList .info{
margin-top: 10px;
}
.newList .info small{
margin-right: 10px;
font-size: 12px;
}
.newList .info small image{
width: 12px;
margin-right:10px;
}
|
三、js页面代码如下：
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
})
|
.jpg)
.jpg)
