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

刺骨的言语ヽ痛彻心扉 2021-09-17 11:36 721阅读 0赞

小程序

微信小程序信息展示列表

效果展示

wxml

  1. <!-- 轮播图 -->
  2. <view class='haibao' bindtap="seeDetail" id="{
  3.    {item.activityContentId}}" >
  4.   <swiper indicator-dots='{
  5.    {indicatorDots}}' autoplay='{
  6.    {autoplay}}' interval='{
  7.    {interval}}' duration='{
  8.    {duration}}' circular='true' indicator-dots='true' circular='{
  9.    {circular}}' >
  10.     <block wx:for="{
  11.    {carousels}}">
  12.       <swiper-item>
  13.         <image src='{
  14.    {baseUrl}}{
  15.    {item.imgUrl}}' class='slide-image' binderror="errorFunction"></image>
  16.         <text class="item-title">{
  17.    {item.title}}</text>
  18.       </swiper-item>
  19.     </block>
  20.   </swiper>
  21. </view>
  22. <!-- 图标 -->
  23. <!-- <view class="nav">
  24.     <view bindtap='classify'>
  25.       <view>
  26.         <image src="/images/icon/renwu.jpg" style="width:80rpx;height:80rpx;"></image>
  27.       </view>
  28.       <view>艺人菜谱</view>
  29.     </view>
  31.     <view bindtap='movies'>
  32.       <view>
  33.         <image src="/images/icon/zhibo.jpg" style="width:80rpx;height:80rpx;"></image>
  34.       </view>
  35.       <view>电影推荐</view>
  36.     </view>
  38.     <view bindtap='post'>
  39.       <view>
  40.         <image src="/images/icon/chengshi.jpg" style="width:80rpx;height:80rpx;"></image>
  41.       </view>
  42.       <view>阅读文章</view>
  43.     </view>
  44.   </view> -->
  46. <!-- 数据列表 -->
  47. <view wx:for="{
  48.    {dataList}}" class="item" bindtap="seeDetail" id="{
  49.    {item.activityContentId}}">
  50. <!-- 线条 -->
  51.  <view class="line"></view>
  53.   <view class="title">{
  54.    {item.activityTitle}}</view>
  55.   <view class='pic'>
  56.     <image src="{
  57.    {baseUrl}}{
  58.    {item.activitySmimg}}" style="width:100%;height:203px;"></image>
  59.   </view>
  60.   <view class="info">
  61.     <view class="desc">
  62.       <text>{
  63.    {item.activityType}}</text>
  64.       <text>{
  65.    {item.activityLocation}}</text>
  66.       <!-- <text>{
  67.    {item.createDate}}</text> -->
  68.       <text>{
  69.    {util.sub(item.activityTime)}}</text>
  70.     </view>
  71.   </view>
  72. </view>
  73. <!-- 加载标志 -->
  74. <view class="load_more" hidden="{
  75.    {!loading}}">
  76.   <view class="load_loading"></view>
  77.   <view class="load-tips">正在加载……</view>
  78. </view>
  80. <wxs module="util">
  81.     var sub = function(val) {
  82.         return val.substring(0, 10)
  83.     }
  84.     module.exports.sub = sub;
  85. </wxs>

wxss

  1. /**index.wxss**/
  3. .item-title {
  4.   margin-bottom: 16rpx;
  5.   font-size: 24rpx;
  6. }
  8. /* 图标 */
  9. .nav{
  10.   display: flex;
  11.   flex-direction: row;
  12.   padding:10px;
  13. }
  14. .nav view{
  15.   margin:0 auto;
  16.   text-align: center;
  17.   font-size: 13px;
  18. }
  20. /* 轮播图 */
  22. .haibao swiper {
  23.   height: 150px;
  24. }
  26. /* 图片 */
  28. .slide-image {
  29.   width: 100%;
  30.   height: 150px;
  31. }
  33. /* 卡片 */
  35. .item {
  36.   margin-top: 15px;
  37.   margin-bottom: 10px;
  38. }
  40. /* 标题 */
  42. .title {
  43.   margin-top: 8px;
  44.   margin-left: 10px;
  45.   margin-bottom: 8px;
  46.   color: #444;
  47.   font-weight: bold;
  48.   font-size: 18px;
  49. }
  51. /* 信息 */
  53. .info {
  54.   display: flex;
  55.   flex-direction: row;
  56.   font-size: 12px;
  57.   color: #999;
  58. }
  60. /* 前半部分 */
  62. .desc {
  63.   width: 95%;
  64.   margin-left: 10px;
  65. }
  67. /* 每条信息 */
  69. .desc text {
  70.   margin-right: 10px;
  71. }
  73. /* 后半部分 */
  75. .opr {
  76.   width: 6%;
  77. }
  79. /* 打叉 */
  81. .opr view {
  82.   width: 15px;
  83.   height: 13px;
  84.   border: 1px solid #ccc;
  85.   line-height: 10px;
  86.   text-align: center;
  87.   border-radius: 5px;
  88. }
  90. /* 框架 */
  92. .load_more {
  93.   margin: 20rpx auto;
  94.   font-size: 14px;
  95.   text-align: center;
  96.   display: flex;
  97.   flex-direction: row;
  98.   justify-content: center;
  99. }
  101. /* 标志 */
  103. .load_loading {
  104.   margin: 0 5px;
  105.   width: 40rpx;
  106.   height: 40rpx;
  107.   /* display: inline-block;
  108.   vertical-align: middle; */
  109.   animation: weuiLoading 5s steps(12, end) infinite;
  110.   background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  111.   background-size: 100%;
  112. }
  114. /* 文字 */
  116. .load_tips {
  117.   display: inline-block;
  118.   vertical-align: middle;
  119. }
  121. .linecenter {
  122.   text-align: center;
  123.   display: flex;
  124.   width: 95%;
  125.   flex-direction: row;
  126.   justify-content: center;
  127. }
  129. .line {
  130.   border: 1px solid #ccc;
  131.   opacity: 0.3;
  132. }

js

  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4. // 页数
  5. var pageNum = 1;
  6. // 页量
  7. var pageCount = 10;
  8. Page({
  9.   // 设置数据
  10.   data: {
  11.     // 列表数据数组
  12.     dataList: [],
  13.     // 轮播图
  14.     indicatorDots: true,
  15.     autoplay: true,
  16.     interval: 3000,
  17.     duration: 500,
  18.     circular: true,
  19.     // 基地址
  20.     baseUrl: app.globalData.baseUrl,
  21.     // 下拉刷新，上拉加载
  22.     loading: false,
  23.     // loaded: false,
  24.     carousels: [],
  25.     // itemtitle: [],
  26.     avatar: '',
  27.     // 图片
  28.     imgUrls: [
  29.       "/images/haibao/haibao-1.jpg",
  30.       "/images/haibao/haibao-2.jpg"
  31.     ]
  32.   },
  34.   // 跳转
  35.   classify: function () {
  36.     wx.navigateTo({
  37.       url: '../classify/classify',
  38.     })
  39.   },
  40.   post: function () {
  41.     wx.navigateTo({
  42.       url: '../posts/post',
  43.     })
  44.   },
  45.   movies: function () {
  46.     wx.navigateTo({
  47.       url: '../movies/movies',
  48.     })
  49.   },
  51.   errorFunction: function () {
  52.     this.setData({
  53.       avatar: 'images/haibao/haibao-1.jpg'
  54.     })
  55.   },
  56.   /**
  57.    * 生命周期函数--监听页面加载
  58.    * 进入页面的时候开始加载一次数据
  59.    */
  60.   onLoad: function(options) {
  61.     // 转换
  62.     var that = this;
  63.     // 加载轮播
  64.     that.loadPic();
  65.     // 加载数据列表 参数：页数于页量
  66.     that.loadList(pageNum, pageCount);
  67.     // 显示加载中
  68.     wx.showLoading({
  69.       title: '加载中',
  70.       mask: true
  71.     })
  72.     // 显示时间
  73.     setTimeout(function() {
  74.       wx.hideLoading()
  75.     }, 2000)
  76.   },
  78.   // 加载轮播
  79.   loadPic: function(){
  80.     var that = this;
  81.     wx.request({
  82.       url: app.globalData.baseUrl + 'js//carousel/list/', // 接口地址
  83.       method: 'GET',
  84.       header: {
  85.         'content-type': 'application/json' //默认值
  86.       },
  87.       // 成功
  88.       success: function (res) {
  89.         console.log("interface/activity/carousel/list/ 轮播 成功", res.data.data);
  90.         console.log(res.data.data[0].imgUrl)
  91.         // console.log(res.data.data.title)
  92.          that.setData({
  93.            carousels: res.data.data,
  94.           //  itemtitle: res.data.data.titile
  95.          });
  96.       },
  97.       // 失败
  98.       fail: function (err) {
  99.         console.log("interface/activity/carousel/list/ 轮播 失败", err);
  100.       }
  101.     })
  102.   },
  104.   // 加载数据的函数
  105.   loadList: function(page, count) {
  106.     var that = this;
  107.     //发送请求
  108.     wx.request({
  109.       url: app.globalData.baseUrl + 'j/activ' + page + '/' + count, //接口地址
  110.       method: 'GET',
  111.       header: {
  112.         'content-type': 'application/json' //默认值
  113.       },
  114.       // 成功
  115.       success: function(res) {
  116.         console.log("dataList:", that.data.dataList);
  117.         var arr = that.data.dataList;
  118.         if (page == 1) {
  119.           arr = [];
  120.         }
  121.         if (res.data.total == 0) {
  122.           //没有数据返回
  123.           console.log(res.data.msg);
  124.           // 显示没有更多数据了
  125.           wx.showToast({
  126.             title: '没有更多数据了……',
  127.             icon: 'none'
  128.           })
  129.           // 显示时间
  130.           setTimeout(function() {
  131.             wx.hideToast()
  132.           }, 2000)
  134.           pageNum -= 1;
  135.           return;
  136.         }
  137.         arr = arr.concat(res.data.data);
  138.         console.log("interface/activity/list 成功", res.data);
  139.         that.setData({
  140.           dataList: arr
  141.         });
  142.       },
  143.       // 失败
  144.       fail: function(err) {
  145.         console.log("interface/activity/list 失败", err);
  146.       }
  147.     })
  148.   },
  150.   // 详情页函数
  151.   seeDetail: function(e) {
  152.     if (!e.currentTarget.id == "") {
  153.       wx.navigateTo({
  154.         url: '../detail/detail?contentId=' + e.currentTarget.id
  155.       })
  156.       console.log(e)
  157.     } else {
  158.       console.log("无内容")
  159.     }
  160.   },
  162.   /**
  163.    * 页面相关事件处理函数--监听用户下拉动作，刷新
  164.    */
  165.   onPullDownRefresh: function() {
  166.     console.log("下拉刷新")
  167.     var that = this;
  168.     wx.showNavigationBarLoading()
  170.     setTimeout(() => {
  171.       // 轮播刷新
  172.       that.loadPic();
  173.       pageNum = 1;
  174.       that.loadList(pageNum, pageCount);
  175.       wx.hideNavigationBarLoading() //完成停止加载
  176.       wx.stopPullDownRefresh() //停止下拉刷新
  177.     }, 2000)
  178.   },
  180.   /**
  181.    * 页面上拉触底事件的处理函数
  182.    */
  183.   onReachBottom: function() {
  184.     var that = this;
  185.     console.log('上拉')
  187.     if (this.data.loading) return;
  188.     this.setData({
  189.       loading: true
  190.     });
  192.     setTimeout(() => {
  193.       pageNum += 1;
  194.       that.loadList(pageNum, pageCount);
  195.       that.setData({
  196.         loading: false
  197.       })
  198.     }, 2000)
  199.   },
  201.   /**
  202.    * 用户点击右上角分享
  203.    */
  204.   onShareAppMessage: function() {
  206.   },
  207.   // 获取用户
  208.   getUserInfo: function(e) {
  209.     console.log(e)
  210.     app.globalData.userInfo = e.detail.userInfo
  211.     this.setData({
  212.       userInfo: e.detail.userInfo,
  213.       hasUserInfo: true
  214.     })
  215.   }
  216. })

json

  1. {
  2.  "enablePullDownRefresh": true
  3. }

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

结语

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

发表评论

表情：
评论列表 （有 0 条评论，721人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序播放音频列表

    微信小程序的音频播放    链接：[单曲播放][Link 1]   对于音频的播放，肯定会有多首音频的情况，这个时候播放下一曲的功能就需要做出来： 我这边做了一个粗糙的版

    女爷i女爷i/ 0 赞/ 446 阅读