首页 > 小程序教程 > 微信小程序有图新闻列表页样式制作设计教程下载

微信小程序有图新闻列表页样式制作设计教程下载

上一篇 下一篇
本文给大家带来的是微信小程序有图新闻列表页样式制作设计教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/notice/notice.wxml-->
<scroll-view scroll-y="true" style="height:100%" bindscrolltolower="loadMore" bindscroll="scroll">
  <view class="noticeList bg-white" style="margin-top:0;">
    <block wx:for="{{notice}}" wx:key="item.id">
      <navigator class="noticeList-item" url="../article/article">
        <image src="{{item.image}}" style="width:112px;height:68px;"></image>
        <view class="noticeList-item-r">
          <text class="noticeList-item-title">{{item.title}}</text>
          <text class="noticeList-item-desc">{{item.desc}}</text>
        </view>
      </navigator>
    </block>
  </view>
<import src="../../template/template.wxml"/>
<template is="qrcode" />
<!--   <view class="tips1">
      <view wx:if="{{hasMore}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
          <icon type="waiting" size="45"/><text>玩命的加载中...</text>
      </view>
      <view wx:else><text>没有更多内容了</text></view>
  </view> -->
</scroll-view>
 
 
二、js页面代码如下:
// pages/notice/notice.js
var app = getApp();
Page({
  data:{
    notice:[{
      image: '../../images/notice-1.png',
      title: '2016第三季度报告',
      desc: '1.1本公司董事会、监事会及董事、监事、高级管理人员保证本报告所载资料不存在任何虚假记载、误导性陈述或者重大遗漏...'
    },{
      image: '../../images/notice-2.png',
      title: '万科首次上榜《财富》世界500强 名列第356位',
      desc: '2016年7月20日,《财富》“世界500强”企业排行榜出炉,万科企业股份有限公司凭借2015年年度1843.18亿元的营收...'
    },{
      image: '../../images/notice-3.png',
      title: '2016中国房企百亿军团出炉!恒大(03333)击败万科(02202)登顶榜首',
      desc: '中国指数研究院发布2016年中国房地产销售额百亿企业榜单,全国共有131家房地产企业跻身百亿军团,其中恒大、万科...'
    },{
      image: '../../images/notice-2.png',
      title: '万科首次上榜《财富》世界500强 名列第356位',
      desc: '2016年7月20日,《财富》“世界500强”企业排行榜出炉,万科企业股份有限公司凭借2015年年度1843.18亿元的营收...'
    },{
      image: '../../images/notice-2.png',
      title: '万科首次上榜《财富》世界500强 名列第356位',
      desc: '2016年7月20日,《财富》“世界500强”企业排行榜出炉,万科企业股份有限公司凭借2015年年度1843.18亿元的营收...'
    },{
      image: '../../images/notice-2.png',
      title: '万科首次上榜《财富》世界500强 名列第356位',
      desc: '2016年7月20日,《财富》“世界500强”企业排行榜出炉,万科企业股份有限公司凭借2015年年度1843.18亿元的营收...'
    },{
      image: '../../images/notice-2.png',
      title: '万科首次上榜《财富》世界500强 名列第356位',
      desc: '2016年7月20日,《财富》“世界500强”企业排行榜出炉,万科企业股份有限公司凭借2015年年度1843.18亿元的营收...'
    },{
      image: '../../images/notice-2.png',
      title: '万科首次上榜《财富》世界500强 名列第356位',
      desc: '2016年7月20日,《财富》“世界500强”企业排行榜出炉,万科企业股份有限公司凭借2015年年度1843.18亿元的营收...'
    },{
      image: '../../images/notice-2.png',
      title: '万科首次上榜《财富》世界500强 名列第356位',
      desc: '2016年7月20日,《财富》“世界500强”企业排行榜出炉,万科企业股份有限公司凭借2015年年度1843.18亿元的营收...'
    }],
    page: 1,
    size: 10,
    hasMore:true
  },
  loadMore:function(e) {
    // console.log(e)
    //   if(!this.data.hasMore) return
    //   this.setData({

    //   })
  },
  scroll:function(e){
    // console.log(e);
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  getScanning: function () {
    app.getScanning()
  }
})

模板简介:该模板名称为【微信小程序有图新闻列表页样式制作设计教程下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 37,590次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-25
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
响应式 微信文章 单页式简历模板 自适应 微信图片 微信素材 微信模板 微信公众平台 企业网站 html5
您可能会喜欢的其他模板