(1)使用scroll-view必须设置高度,如何占用出去header之外的空间。
(2)如何获取scroll-view列表点击的具体位置(不考虑bindtap,catchtap)
<view>
新闻界面展示
view>
<view style='width:100%' bindtap='clickitem' data-index="{{index}}">
<image src='{{item.newsimg}}' style='width:100px;height:100px;overflow:hidden;display:inline-block;float:left'>image>
<view style='float:left;width:250px'>
<text style='display:block'>title :{{item.newstitle}}text>
<text style='display:block'>author :{{item.newsauthor}}text>
<text style='display:block'>time :{{item.newstime}}text>
view>
<view style='clear:both;display:block;height:10px;background-color:white'/>
view>
block>
scroll-view>
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
windowHeight:100,
newslist:[
{newstitle:"title1",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor:"zuozhe1",
newstime:"newstime1"},
{
newstitle: "title2",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor: "zuozhe2",
newstime: "newstime2"
},
{
newstitle: "title3",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor: "zuozhe3",
newstime: "newstime3"
},
{
newstitle: "title4",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor: "zuozhe4",
newstime: "newstime4"
},
{
newstitle: "title5",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor: "zuozhe5",
newstime: "newstime5"
},
{
newstitle: "title16",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor: "zuozhe6",
newstime: "newstime6"
},
{
newstitle: "title7",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor: "zuozhe7",
newstime: "newstime7"
},
{
newstitle: "title18",
newsimg: "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2839142893,408396789&fm=85&s=72B9616CAEE5A37650E7B08B0200E08A",
newsauthor: "zuozhe8",
newstime: "newstime8"
},
{
newstitle: "title19",
newsimg: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2545785285,72806503&fm=173&app=25&f=JPEG?w=218&h=146&s=DBC004C60CB39E514A27E23C03008049",
newsauthor: "zuozhe9",
newstime: "newstime9"
},
{
newstitle: "title10",
newsimg: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2545785285,72806503&fm=173&app=25&f=JPEG?w=218&h=146&s=DBC004C60CB39E514A27E23C03008049",
newsauthor: "zuozhe10",
newstime: "newstime10"
},
{
newstitle: "title11",
newsimg: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2545785285,72806503&fm=173&app=25&f=JPEG?w=218&h=146&s=DBC004C60CB39E514A27E23C03008049",
newsauthor: "zuozhe11",
newstime: "newstime11"
},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
//设置scroll-view高度
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight
});
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
upper:function(){
console.log("======uppperupper========");
},
lower:function(e){
console.log("========lowerlower============");
},
clickitem:function(e){
var position = e.currentTarget.dataset.index;
console.log("================"+position);
}
})
解决:
(1)
onLoad: function (options) {
var that = this;
//设置scroll-view高度
wx.getSystemInfo({
success: function (res) {
that.setData({
//此处获取可用屏幕高度,顶部还有其他view,直接减去其他view的高度就是scrollview的高度。
windowHeight: res.windowHeight
});
}
});
},
(2)
<view style='width:100%' bindtap='clickitem' data-index="{{index}}">
clickitem:function(e){
var position = e.currentTarget.dataset.index;
console.log("================"+position);
}