<view class="headLine box box-tb">
<view class="headLineWra box box-lr" wx:for="{{headLineList}}" bindtap="jumpDetails" data-Id="{{item.id}}" >
<view class="headLineContent box box-tb box-align-center box-pack-around">
<view class="headLineTitle">
{{item.title}}
</view>
<view class="headLineInfor box box-lr box-pack-between">
<view class="headLineSource">
日期: {{item.date}}
</view>
<view class="headLineSource">
来源：{{item.source}}
</view>
</view>
</view>
<view class="arrowsBox box box-tb box-pack-center">
<image src="../../images/shop.png"></image>
</view>
</view>
</view>
<view class="moreButton" bindtap="loadMore">
点击加载更多↓
</view>
|
/*资讯*/
.he{
/*white-space: nowrap;*/
display: block;
height:603rpx
}
.y{
width: 33%;
height: 500rpx;
display: inline-block;
margin-left: 10rpx;
}
/* pages/headLine/headLine.wxss */
.headLine {
width: 100%;
}
.headLineWra {
height: 200rpx;
width: 100%;
border-bottom: 1rpx solid #ccc;
}
.headLineContent {
width: 80%;
height: 100%;
}
.headLineTitle {
width: 90%;
height: 86rpx;
line-height: 46rpx;
font-weight: 700;
font-size: 32rpx;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.headLineInfor {
width: 90%;
height: 20%;
font-size: 26rpx;
color: #666;
}
.arrowsBox {
width: 20%;
height: 100%;
}
.arrowsBox image {
width: 116rpx;
height: 116rpx;
/*padding-left: 50rpx;*/
}
.moreButton {
margin-top: 20rpx;
width: 100%;
height:40rpx;
text-align: center;
/*line-height: 80rpx;*/
font-size: 28rpx;
color: #ccc
}
/*伸缩盒子模型*/
.box {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/*从左至右*/
.box-lr {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
/*从右至左*/
.box-rl {
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
/*从上至下*/
.box-tb {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/*从下至上*/
.box-bt {
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
/*主轴居中*/
.box-pack-center {
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
/*主轴居左*/
.box-pack-start {
-webkit-box-pack: start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
/*主轴居右*/
.box-pack-end {
-webkit-box-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
/*主轴左右不留白*/
.box-pack-between {
-webkit-box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/*主轴左右留白*/
.box-pack-around {
-moz-justify-content: space-around;
-webkit-justify-content: space-around;
justify-content: space-around;
}
/*交叉轴居中对齐*/
.box-align-center {
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}
/*交叉轴居左对齐*/
.box-align-start {
-webkit-box-align: start;
-moz-align-items: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
/*交叉轴居右对齐*/
.box-align-end {
-webkit-box-align: end;
-moz-align-items: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
|
// pages/inf/inf.js
Page({
/**
* 页面的初始数据
*/
data: {
'headLineList': [
{
'title': '第一次看到非常完整的轮播图片和滚动效果看到非常完整的轮播图片和滚动效果看到非常完整的轮播图片和滚动效果',
'source': '中国旅游网',
'date': '2017-9-10'
}, {
'title': '第一次看到非常完整的轮播图片和滚动效果',
'source': '中国旅游网',
'date': '2017-9-10'
}, {
'title': '第一次看到非常完整的轮播图片和滚动效果',
'source': '中国旅游网',
'date': '2017-9-10'
},
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
// 资讯
jumpDetails: function (e) {
console.log(e.currentTarget.dataset.title)
wx.navigateTo({
url: '../news/news?title=' + e.currentTarget.dataset.title,
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: '微信小程序联盟',
desc: '最具人气的小程序开发联盟!',
path: '/page/user?id=123'
}
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
}
})
|
模板简介：该模板名称为【微信小程序企业版新闻资讯列表页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
