最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序文章列表功能完整實例

 更新時間:2020年06月03日 09:08:38   作者:huangyuxin_  
這篇文章主要介紹了微信小程序文章列表功能,結合完整實例形式詳細分析了微信小程序文章列表功能具體布局、樣式、功能相關實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了微信小程序文章列表功能。分享給大家供大家參考,具體如下:

沒有服務器接口數(shù)據(jù)的情況下玩一玩。

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({
 
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  this.setData({ articles: articleData.data});
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function () {
 
 },
 
 /**
  * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 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:"我大概老了。我的頭發(fā)已經(jīng)蒼白,不是很明白的事么?我的手顫抖著,不是很明白的事么?那么我的靈魂的手一定也顫抖著,頭發(fā)也一定蒼白了。",
 content:"我的心分外地寂寞。 然而我的心很平安;沒有愛憎,沒有哀樂,也沒有顏色和聲音。 我大概老了。我的頭發(fā)已經(jīng)蒼白,不是很明白的事么?我的手顫抖著,不是很明白的事么?那么我的靈魂的手一定也顫抖著,頭發(fā)也一定蒼白了。 然而這是許多年前的事了。 這以前,我的心也曾充滿過血腥的歌聲:血和鐵,火焰和毒,恢復和報仇。而忽然這些都空虛了,但有時故意地填以沒奈何的自欺的希望。希望,希望,用這希望的盾,抗拒那空虛中的暗夜的襲來,雖然盾后面也依然是空虛中的暗夜。然而就是如此,陸續(xù)地耗盡了我的青春。 我早先豈不知我的青春已經(jīng)逝去?但以為身外的青春固在:星,月光,僵墜的蝴蝶,暗中的花,貓頭鷹的不祥之言,杜鵑的啼血,笑的渺茫,愛的翔舞?!m然是悲涼漂渺的青春罷,然而究竟是青春。 然而現(xiàn)在何以如此寂寞?難道連身外的青春也都逝去,世上的青年也多衰老了么? 我只得由我來肉薄這空虛中的暗夜了。我放下了希望之盾,我聽到Petofi Sandor (1823-49)的“希望”之歌: 希望是什么?是娼妓: 她對誰都蠱惑,將一切都獻給; 待你犧牲了極多的寶貝—— 你的青春——她就拋棄你。 這偉大的抒情詩人,匈牙利的愛國者,為了祖國而死在可薩克兵的矛尖上,已經(jīng)七十五年了。悲哉死也,然而更可悲的是他的詩至今沒有死。 但是,可慘的人生!桀驁英勇如Petofi,也終于對了暗夜止步,回顧茫茫的東方了。他說: 絕望之為虛妄,正與希望相同。 倘使我還得偷生在不明不暗的這“虛妄”中,我就還要尋求那逝去的悲涼漂渺的青春,但不妨在我的身外。因為身外的青春倘一消滅,我身中的遲暮也即凋零了。 然而現(xiàn)在沒有星和月光,沒有僵墜的蝴蝶以至笑的渺茫,愛的翔舞。然而青年們很平安。 我只得由我來肉薄這空虛中的暗夜了,縱使尋不到身外的青春,也總得自己來一擲我身中的遲暮。但暗夜又在那里呢?現(xiàn)在沒有星,沒有月光以至沒有笑的渺茫和愛的翔舞;青年們很平安,而我的面前又竟至于并且沒有真的暗夜。 絕望之為虛妄,正與希望相同!"
}];
 
module.exports = {
 data: data
}

module.exports 對象是由模塊系統(tǒng)創(chuàng)建的。在我們自己寫模塊的時候,需要在模塊最后寫好模塊接口,聲明這個模塊對外暴露什么內(nèi)容,module.exports 提供了暴露接口的方法。

希望本文所述對大家微信小程序設計有所幫助。

相關文章

  • JavaScript數(shù)組常用方法解析及數(shù)組扁平化

    JavaScript數(shù)組常用方法解析及數(shù)組扁平化

    這篇文章主要介紹了JavaScript數(shù)組常用方法解析及數(shù)組扁平化,數(shù)組作為在開發(fā)中常用的集合,除了for循環(huán)遍歷以外,還有很多內(nèi)置對象的方法,包括map,以及數(shù)組篩選元素filter等
    2022-07-07
  • JS實現(xiàn)的文字間歇循環(huán)滾動效果完整示例

    JS實現(xiàn)的文字間歇循環(huán)滾動效果完整示例

    這篇文章主要介紹了JS實現(xiàn)的文字間歇循環(huán)滾動效果,涉及javascript結合時間函數(shù)定時觸發(fā)實現(xiàn)頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下
    2018-02-02
  • 教你5分鐘學會用requirejs(必看篇)

    教你5分鐘學會用requirejs(必看篇)

    下面小編就為大家?guī)硪黄棠?分鐘學會用requirejs(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • 如何實現(xiàn)chrome瀏覽器關閉頁面時彈出“確定要離開此面嗎?”

    如何實現(xiàn)chrome瀏覽器關閉頁面時彈出“確定要離開此面嗎?”

    這篇文章主要介紹了如何實現(xiàn)chrome瀏覽器關閉頁面時彈出“確定要離開此面嗎?”的方法以及相關資料,需要的朋友可以參考下
    2015-03-03
  • 詳解小程序input框失焦事件在提交事件前的處理

    詳解小程序input框失焦事件在提交事件前的處理

    這篇文章主要介紹了詳解小程序input框失焦事件在提交事件前的處理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • Javascript 強制類型轉換函數(shù)

    Javascript 強制類型轉換函數(shù)

    javascript是弱類型的語言,所以強制類型轉換還是比較重要的,下面看一下它的幾個強制轉換的函數(shù)
    2009-05-05
  • 移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的介紹與使用技巧

    移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的介紹與使用技巧

    在日常的移動端開發(fā)時,一般都是試用chrome瀏覽器的移動端模式進行開發(fā)和調(diào)試,只有在chrome調(diào)試完成,而最近發(fā)現(xiàn)了一個新的調(diào)試方法,所以這篇文章主要給大家介紹了關于移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的基本資料,以及其使用的一些技巧,需要的朋友可以參考下。
    2017-10-10
  • Worker加載JS腳本跨域問題的幾種解決方法

    Worker加載JS腳本跨域問題的幾種解決方法

    Web Worker 是一種在后臺線程中運行的 JavaScript 腳本,允許我們在不阻塞主線程的情況下執(zhí)行復雜計算或處理,Worker 加載的 JS 腳本如果存在跨域問題,可能導致腳本無法正常加載和執(zhí)行,以下是解決 Worker 加載 JS 腳本跨域問題的幾種方法,需要的朋友可以參考下
    2025-02-02
  • js中作用域的實例解析

    js中作用域的實例解析

    本文主要通過幾個實例對js中作用域進行詳細解析,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • JS技巧Canvas性能優(yōu)化臟矩形渲染實例詳解

    JS技巧Canvas性能優(yōu)化臟矩形渲染實例詳解

    這篇文章主要為大家介紹了JS技巧Canvas?性能優(yōu)化臟矩形渲染實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01

最新評論

兴隆县| 栾城县| 墨竹工卡县| 汤原县| 台湾省| 独山县| 拉萨市| 南部县| 邮箱| 灵武市| 隆德县| 丰台区| 昌邑市| 静海县| 永修县| 兰坪| 太原市| 福清市| 青川县| 沧源| 唐海县| 开平市| 法库县| 西华县| 永和县| 繁峙县| 偏关县| 图木舒克市| 平潭县| 肥东县| 琼海市| 故城县| 永仁县| 玉山县| 商水县| 盐山县| 台湾省| 栾川县| 托克逊县| 津南区| 广州市|