微信小程序新闻信息列表展示

小程序

微信小程序信息展示列表

效果展示

wxml

<!-- 轮播图 -->
<view class='haibao' bindtap="seeDetail" id="{{item.activityContentId}}" >
  <swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' circular='true' indicator-dots='true' circular='{{circular}}' >
    <block wx:for="{{carousels}}">
      <swiper-item>
        <image src='{{baseUrl}}{{item.imgUrl}}' class='slide-image' binderror="errorFunction"></image>
        <text class="item-title">{{item.title}}</text>
      </swiper-item>
    </block>
  </swiper>
</view>
<!-- 图标 -->
<!-- <view class="nav">
    <view bindtap='classify'>
      <view>
        <image src="/images/icon/renwu.jpg" style="width:80rpx;height:80rpx;"></image>
      </view>
      <view>艺人菜谱</view>
    </view>

    <view bindtap='movies'>
      <view>
        <image src="/images/icon/zhibo.jpg" style="width:80rpx;height:80rpx;"></image>
      </view>
      <view>电影推荐</view>
    </view>

    <view bindtap='post'>
      <view>
        <image src="/images/icon/chengshi.jpg" style="width:80rpx;height:80rpx;"></image>
      </view>
      <view>阅读文章</view>
    </view>
  </view> -->

<!-- 数据列表 -->
<view wx:for="{{dataList}}" class="item" bindtap="seeDetail" id="{{item.activityContentId}}">
<!-- 线条 -->
 <view class="line"></view>

  <view class="title">{{item.activityTitle}}</view>
  <view class='pic'>
    <image src="{{baseUrl}}{{item.activitySmimg}}" style="width:100%;height:203px;"></image>
  </view>
  <view class="info">
    <view class="desc">
      <text>{{item.activityType}}</text>
      <text>{{item.activityLocation}}</text>
      <!-- <text>{{item.createDate}}</text> -->
      <text>{{util.sub(item.activityTime)}}</text>
    </view>
  </view>
</view>
<!-- 加载标志 -->
<view class="load_more" hidden="{{!loading}}">
  <view class="load_loading"></view>
  <view class="load-tips">正在加载……</view>
</view>

<wxs module="util">
    var sub = function(val) {
        return val.substring(0, 10)
    }
    module.exports.sub = sub;
</wxs>

wxss

/**index.wxss**/

.item-title {
  margin-bottom: 16rpx;
  font-size: 24rpx;
}

/* 图标 */
.nav{
  display: flex;
  flex-direction: row;
  padding:10px;
}
.nav view{
  margin:0 auto;
  text-align: center;
  font-size: 13px;
}

/* 轮播图 */

.haibao swiper {
  height: 150px;
}

/* 图片 */

.slide-image {
  width: 100%;
  height: 150px;
}

/* 卡片 */

.item {
  margin-top: 15px;
  margin-bottom: 10px;
}

/* 标题 */

.title {
  margin-top: 8px;
  margin-left: 10px;
  margin-bottom: 8px;
  color: #444;
  font-weight: bold;
  font-size: 18px;
}

/* 信息 */

.info {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  color: #999;
}

/* 前半部分 */

.desc {
  width: 95%;
  margin-left: 10px;
}

/* 每条信息 */

.desc text {
  margin-right: 10px;
}

/* 后半部分 */

.opr {
  width: 6%;
}

/* 打叉 */

.opr view {
  width: 15px;
  height: 13px;
  border: 1px solid #ccc;
  line-height: 10px;
  text-align: center;
  border-radius: 5px;
}

/* 框架 */

.load_more {
  margin: 20rpx auto;
  font-size: 14px;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* 标志 */

.load_loading {
  margin: 0 5px;
  width: 40rpx;
  height: 40rpx;
  /* display: inline-block;
  vertical-align: middle; */
  animation: weuiLoading 5s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}

/* 文字 */

.load_tips {
  display: inline-block;
  vertical-align: middle;
}

.linecenter {
  text-align: center;
  display: flex;
  width: 95%;
  flex-direction: row;
  justify-content: center;
}

.line {
  border: 1px solid #ccc;
  opacity: 0.3;
}

js

//index.js
//获取应用实例
const app = getApp()
// 页数
var pageNum = 1;
// 页量
var pageCount = 10;
Page({
  // 设置数据
  data: {
    // 列表数据数组
    dataList: [],
    // 轮播图
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
    circular: true,
    // 基地址
    baseUrl: app.globalData.baseUrl,
    // 下拉刷新,上拉加载
    loading: false,
    // loaded: false,
    carousels: [],
    // itemtitle: [],
    avatar: '',
    // 图片
    imgUrls: [
      "/images/haibao/haibao-1.jpg",
      "/images/haibao/haibao-2.jpg"
    ]
  },

  // 跳转
  classify: function () {
    wx.navigateTo({
      url: '../classify/classify',
    })
  },
  post: function () {
    wx.navigateTo({
      url: '../posts/post',
    })
  },
  movies: function () {
    wx.navigateTo({
      url: '../movies/movies',
    })
  },

  errorFunction: function () {
    this.setData({
      avatar: 'images/haibao/haibao-1.jpg'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   * 进入页面的时候开始加载一次数据
   */
  onLoad: function(options) {
    // 转换
    var that = this;
    // 加载轮播
    that.loadPic();
    // 加载数据列表 参数:页数于页量
    that.loadList(pageNum, pageCount);
    // 显示加载中
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    // 显示时间
    setTimeout(function() {
      wx.hideLoading()
    }, 2000)
  },

  // 加载轮播
  loadPic: function(){
    var that = this;
    wx.request({
      url: app.globalData.baseUrl + 'js//carousel/list/', // 接口地址
      method: 'GET',
      header: {
        'content-type': 'application/json' //默认值
      },
      // 成功
      success: function (res) {
        console.log("interface/activity/carousel/list/ 轮播 成功", res.data.data);
        console.log(res.data.data[0].imgUrl)
        // console.log(res.data.data.title)
         that.setData({
           carousels: res.data.data,
          //  itemtitle: res.data.data.titile
         });
      },
      // 失败
      fail: function (err) {
        console.log("interface/activity/carousel/list/ 轮播 失败", err);
      }
    })
  },

  // 加载数据的函数
  loadList: function(page, count) {
    var that = this;
    //发送请求
    wx.request({
      url: app.globalData.baseUrl + 'j/activ' + page + '/' + count, //接口地址
      method: 'GET',
      header: {
        'content-type': 'application/json' //默认值
      },
      // 成功
      success: function(res) {
        console.log("dataList:", that.data.dataList);
        var arr = that.data.dataList;
        if (page == 1) {
          arr = [];
        }
        if (res.data.total == 0) {
          //没有数据返回
          console.log(res.data.msg);
          // 显示没有更多数据了
          wx.showToast({
            title: '没有更多数据了……',
            icon: 'none'
          })
          // 显示时间
          setTimeout(function() {
            wx.hideToast()
          }, 2000)

          pageNum -= 1;
          return;
        }
        arr = arr.concat(res.data.data);
        console.log("interface/activity/list 成功", res.data);
        that.setData({
          dataList: arr
        });
      },
      // 失败
      fail: function(err) {
        console.log("interface/activity/list 失败", err);
      }
    })
  },

  // 详情页函数
  seeDetail: function(e) {
    if (!e.currentTarget.id == "") {
      wx.navigateTo({
        url: '../detail/detail?contentId=' + e.currentTarget.id
      })
      console.log(e)
    } else {
      console.log("无内容")
    }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作,刷新
   */
  onPullDownRefresh: function() {
    console.log("下拉刷新")
    var that = this;
    wx.showNavigationBarLoading()

    setTimeout(() => {
      // 轮播刷新
      that.loadPic();
      pageNum = 1;
      that.loadList(pageNum, pageCount);
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 2000)
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    var that = this;
    console.log('上拉')

    if (this.data.loading) return;
    this.setData({
      loading: true
    });

    setTimeout(() => {
      pageNum += 1;
      that.loadList(pageNum, pageCount);
      that.setData({
        loading: false
      })
    }, 2000)
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  // 获取用户
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

json

{
 "enablePullDownRefresh": true
}

达叔小生:往后余生,唯独有你 You and me, we are family ! 90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通 简书博客: 达叔小生 https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术栈

坑爹的 Java 可变参数,把我整得够惨。。

就是方法参数用 Object... args 三个点形式,一个参数可以接收多个参数。

12550
来自专栏木头编程 - moTzxx

APP (UniAPP) 微信支付回调的 HTTP_RAW_POST_DATA 报错情况 (wxpayv3)

{"appid":"wxdd8xxxxxxxxxxx30","bank_type":"CFT","cash_fee":"1","fee_type":"CNY",...

18830
来自专栏程序员的成长之路

一个简单又诡异的互联网变现思维(抖音赚钱)

我们都知道互联网是赚钱最容易的地方,并且是赚钱最多的地方,同时也是赚钱最快的地方。

19540
来自专栏程序源代码

微信小程序+商城信息管理系统

a 会员管理 b 会员等级 c 收货地址管理d 会员优惠劵 e 会员收藏 f 会员足迹

96130
来自专栏Java技术栈

Spring Boot 2.2 增加了一个新功能,启动飞起~

前几天栈长分享了一个好玩的框架:一个比Spring Boot快44倍的Java框架!,是不是感觉 Spring Boot 略慢?今天讲一下 Spring Boo...

15250
来自专栏雪胖纸的玩蛇日常

广告小程序后端开发(16.优惠券系统:原理流程图,奖品实验数据,生成二维码)

12530
来自专栏网站建设、网站制作专栏

怎么建营销型网站,营销型网站建设注意事项

营销型网站建设一直以来是备受热议的话题,从推出以来,从最初地概念提出,到2015-2016年度的泛滥,很多用户认为,营销型网站就是首页堆积产品优势、特点、荣誉证...

16750
来自专栏木头编程 - moTzxx

APP 申请微信支付时提示:"你输入的APPID认证主体名称与实际认证主体不一致。。。 "

6.6K20
来自专栏后端进阶

Golang 环境配置与应用编译

Go 语言现在是越来越火了,出现在各个领域中,称它为 21 世纪的 C 语言一点都不为过,而且 Go 语言是 2009 年才发布的新语言,可以说它的特性是完全基...

17820
来自专栏hotqin888的专栏

微信小程序富文本编辑器editor初体验-图片上传

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

1.7K10

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励