微信小程序小实例一：文章列表

青旅半醒 2023-08-17 16:46 115阅读 0赞

没有服务器接口数据的情况下玩一玩。

list.wxml

<view>
        <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000" easing-function="linear">
          <swiper-item><image src='/images/banner/2.jpg'></image></swiper-item>
          <swiper-item><image src='/images/banner/1.jpg'></image></swiper-item>    
        </swiper>
    </view>
    
    
    <block wx:for="{
       {articles}}" wx:for-item="item" wx:key="name" wx:for-index="idx">
    <view class="list-article" catchtap="onPostTap" data-aid="{
       {idx}}">
      <view class="avatar">
        <image src="{
       {item.avatar_img}}"></image>
        <text>{
       {item.date}}</text>
      </view>
      <view class="description">
        <image src="{
       {item.des_img}}"></image>
        <text>{
       {item.description}}</text>
        <view class="article-post">
          <image src="/images/icon/none-star.png"></image>
          <text>{
       {item.posts}}</text>
          <image src="/images/icon/view.png"></image>
          <text>{
       {item.view}}</text>
        </view>
      </view>
    </view>
    </block>

list.wxss

/* pages/index/index.wxss */
    .swiper{
      width: 100%;
      height: 500rpx;
    }
    body{
      background: black;
    }
    .swiper image{
      width: 100%;
      height: 500rpx;
    }
    .list-article{
      margin-top:20rpx;
    }
    .avatar{
      margin-bottom: 20rpx;
      overflow: hidden;
    }
    .avatar image{
        padding-left:20rpx;
        width:100rpx;
        height: 100rpx;
        float: left;
    }
    .avatar text{
      float: left;
      height: 100rpx;
      line-height: 100rpx;
      padding-left:20rpx;
      font-size:0.5rem;
    }
    
    .description image{
      width:100%;
      height: 300rpx;
    }
    list-article{
      flex-direction: column;
    }
    .description text{
      font-size:25rpx;
      letter-spacing: 2rpx;
      padding-top:20rpx;
      padding-left: 20rpx;
      line-height: 40rpx;
    }
    .article-post image{
      width: 30rpx;
      height: 30rpx;
      vertical-align: middle;
    }
    .article-post{
      flex-direction: row;
      margin-top:10rpx;
    }
    .article-post text{
      font-size: 20rpx;
      vertical-align: middle;
      margin-right: 10rpx;
    }

index.json

{
      "navigationBarBackgroundColor": "#405f80",
      "navigationBarTitleText": "一点新闻"
    }

list.js

// pages/index/index.js
    var articleData = require("/../../data/article-data.js");
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.setData({ articles: articleData.data});
      },
    
       
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

article-data.js

var data = [{
      aid:1,
      title: "希望",
      avatar:"鲁迅",
      avatar_img:"/images/avatar/1.png",
      date:"2019-09-29 星期日",
      des_img:"/images/post/sls.jpg",
      view:"100",
      posts:"112",
      description:"我大概老了。我的头发已经苍白，不是很明白的事么？我的手颤抖着，不是很明白的事么？那么我的灵魂的手一定也颤抖着，头发也一定苍白了。",
      content:"我的心分外地寂寞。 然而我的心很平安；没有爱憎，没有哀乐，也没有颜色和声音。 我大概老了。我的头发已经苍白，不是很明白的事么？我的手颤抖着，不是很明白的事么？那么我的灵魂的手一定也颤抖着，头发也一定苍白了。 然而这是许多年前的事了。 这以前，我的心也曾充满过血腥的歌声：血和铁，火焰和毒，恢复和报仇。而忽然这些都空虚了，但有时故意地填以没奈何的自欺的希望。希望，希望，用这希望的盾，抗拒那空虚中的暗夜的袭来，虽然盾后面也依然是空虚中的暗夜。然而就是如此，陆续地耗尽了我的青春。 我早先岂不知我的青春已经逝去？但以为身外的青春固在：星，月光，僵坠的蝴蝶，暗中的花，猫头鹰的不祥之言，杜鹃的啼血，笑的渺茫，爱的翔舞。……虽然是悲凉漂渺的青春罢，然而究竟是青春。 然而现在何以如此寂寞？难道连身外的青春也都逝去，世上的青年也多衰老了么？ 我只得由我来肉薄这空虚中的暗夜了。我放下了希望之盾，我听到Petofi Sandor (1823-49)的“希望”之歌： 希望是什么？是娼妓： 她对谁都蛊惑，将一切都献给； 待你牺牲了极多的宝贝—— 你的青春——她就抛弃你。 这伟大的抒情诗人，匈牙利的爱国者，为了祖国而死在可萨克兵的矛尖上，已经七十五年了。悲哉死也，然而更可悲的是他的诗至今没有死。 但是，可惨的人生！桀骜英勇如Petofi，也终于对了暗夜止步，回顾茫茫的东方了。他说： 绝望之为虚妄，正与希望相同。 倘使我还得偷生在不明不暗的这“虚妄”中，我就还要寻求那逝去的悲凉漂渺的青春，但不妨在我的身外。因为身外的青春倘一消灭，我身中的迟暮也即凋零了。 然而现在没有星和月光，没有僵坠的蝴蝶以至笑的渺茫，爱的翔舞。然而青年们很平安。 我只得由我来肉薄这空虚中的暗夜了，纵使寻不到身外的青春，也总得自己来一掷我身中的迟暮。但暗夜又在那里呢？现在没有星，没有月光以至没有笑的渺茫和爱的翔舞；青年们很平安，而我的面前又竟至于并且没有真的暗夜。 绝望之为虚妄，正与希望相同！"
    }];
    
    module.exports = {
      data: data
    }

module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。