2.yuedu輪播+封裝及數據調用 · 小程序

[TOC] ## 總結 > ## yuedu.js > var local = require("../../data/local"); //獲取數據文件夾里的數據 ``` // pages/index/index.js var local = require("../../data/local"); Page({ data: { imgUrl: [{ url: '/images/post/crab.png', id:0 }, { url: '/images/post/bl.png', id:1 }, { url: '/images/post/sls.png' , id:2 }, { url: '/images/wx.png' , id:3 }, { url: '/images/vr.png', id:4 }, { url: '/images/iqiyi.png', id:5 }], indicatorDots:true, autoplay:true, interval:5000, duration:1000, postList:[], }, onLoad(){ var postList = local.postList; this.setData({ postList }) }, handleClick(event){ // console.log(event.currentTarget.dataset) var id = event.currentTarget.dataset.id; wx.navigateTo({ url: 'yuedu-detail/yuedu-detail?id='+ id, }) }, jump(event){ var id = event.currentTarget.dataset.id; wx.navigateTo({ url: 'yuedu-detail/yuedu-detail?id='+id, }) } }) ``` ## yuedu.wxml ```  <import src="/pages/template/yuedu-list"></import> <view> <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" > <block wx:for="{{imgUrl}}" wx:key="index"> <swiper-item> <image src="{{item.url}}" class="slide-image" data-id='{{item.id}}' catchtap='jump' /> </swiper-item> </block> </swiper> <block wx:for="{{postList}}" wx:key="index"> <view catchtap="handleClick" data-id='{{item.postId}}'> <template is="yueduList" data="{{...item}}" ></template> </view> </block> </view> ``` ##yuedu.wxss ``` @import '/pages/template/yuedu-list.wxss'; .slide-image{ width: 100%; } ``` # template 公共文件夾 ## yuedu-list.wxml ``` <template name="yueduList"> <view class='yuedu-list'> <view> <image src="{{avatar}}" class='avatar'></image> <text>{{date}}</text> </view> <text class='title'>{{title}}</text> <image src="{{imgSrc}}" class='banner'></image> <text class='content'>{{content}}\</text> <view class='evaluate'> <image src='/images/icon/chat1.png' class='icon'></image> <text>{{collection}}</text> <image src='/images/icon/view.png'class='icon'></image> <text>{{reading}}</text> </view> </view> </template> ``` ## yuedu-list.wxss ``` .avatar{ width: 100rpx; height: 100rpx; vertical-align: bottom; } .yuedu-list{ cursor: pointer; display: flex; flex-direction: column; border-bottom: 2rpx solid #999; font-size: 22rpx; margin:20rpx 15rpx } .content{ font-size: 30rpx; text-indent: 60rpx; margin: 15rpx 0 ; } .title{ font-size:40rpx; font-weight: bold; margin: 20rpx 0; } .banner{ width: 100%; height: 400rpx; } .icon{ vertical-align: bottom; width: 50rpx; height: 50rpx; margin: 20rpx 15rpx; } .evaluate text{ line-height: 70rpx; font-size: 30rpx; } ``` # data 裝數據的文件夾 ## local.js > module.exports = { postList: local_database } 將數據打包對外開放 ``` var local_database = [ { date: "Sep 18 2016", title: "正是蝦肥蟹壯時", imgSrc: "/images/post/crab.png", avatar: "/images/avatar/1.png", content: "菊黃蟹正肥，品嘗秋之味。徐志摩把,“看初花的荻蘆”和“到樓外樓吃蟹”,并列為秋天來杭州不能錯過的風雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿，", reading: "112", collection: "96", headImgSrc: "/images/post/crab.png", author: "林白衣", dateTime: "24小時前", detail: "菊黃蟹正肥，品嘗秋之味。徐志摩把“看初花的荻蘆”和“到樓外樓吃蟹”并列為秋天來杭州不能錯過的風雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿，殼凸紅脂塊塊香”；在《世說新語》里，晉畢卓更是感嘆“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生長路，美食與愛豈可辜負？于是作為一個吃貨，突然也很想回味一下屬于我的味蕾記憶。記憶中的秋蟹，是家人的味道，彌漫著濃濃的親情。\n\n是誰來自山川湖海，卻囿于晝夜，廚房與愛？是母親，深思熟慮，聰明耐心。吃蟹前，總會拿出幾件工具，煞有介事而樂此不疲。告訴我們螃蟹至寒，需要佐以姜茶以祛寒，在配備的米醋小碟里，亦添入姜絲與紫蘇，前者驅寒后者增香。泡好菊花茶，歲月靜好，我們靜等。", postId: 0, music: { url: "http://music.163.com/song/media/outer/url?id=571338279", title: "往后余生", coverImg: "http://p4.music.126.net/J-So8uu3Mo9zKfN128L_pQ==/109951162875623128.jpg" } }, { title: "比利·林恩的中場故事", content: "一 “李安是一位絕不會重復自己的導演，本片將極富原創性李安眾所矚目的新片《比利林恩漫長的中場休息》，正式更名《半場無戰事》。", imgSrc: "/images/post/bl.png", reading: 62, detail: "一 “李安是一位絕不會重復自己的導演，本片將極富原創性”李安眾所矚目的新片《比利林恩漫長的中場休息》，正式更名《半場無戰事》。預告片首次曝光后，被視作是明年奧斯卡種子選手。該片根據同名暢銷書改編。原著小說榮獲美國國家圖書獎。也被BBC評為21世紀最偉大的12本英文小說之一。影片講述一位19歲德州男孩的比利·林恩入伍參加伊戰，在一次交火中他大難不死，意外與戰友成為大眾的關注焦點，并被塑造成英雄。之后他們返回國內，在橄欖球賽中場休息時授勛。這名戰爭英雄卻面臨前所未有的心靈煎熬……李安為什么選中這部電影來拍？因為李安想要挑戰前所未有的技術難題：以120幀每秒的速度、4K、3D技術全面結合，來掀起一場電影視覺革命。什么意思？所謂“電影是24格每秒的謊言”，其中的24格，就是幀數。", collection: 92, dateTime: "24小時前", headImgSrc: "/images/post/bl.png", author: "迷的城", date: "Nov 20 2016", avatar: "/images/avatar/1.png", postId: 1, music: { url: "http://music.163.com/song/media/outer/url?id=30814948", title: "從前慢", coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000002xOmp62kqSic.jpg?max_age=2592000" } }, { //按住alt + shift + F 可以格式化代碼樣式 title: "當我們在談論經濟學時，我們在談論什么?", content: "引言在我跟學生課后交流時，以及我在知乎上閱讀有關“經濟”問題的論題時，經常會遇到這樣的情況：...", detail: "1 引言\n\n在我跟學生課后交流時，以及我在知乎上閱讀有關“經濟”問題的論題時，經常會遇到這樣的情況：有些人套用“經濟理論“的知識去解釋現實中發生的經濟事件，結果發現很多事情講不通，或者發現”理論告訴我們的“與現實發生的是相反的。也有學生經常跟我說：經濟學有什么用？為了說明這個，我經常從兩個方面來進行解釋，嘗試用我個人所擅長的解決問題的視角和他們能夠聽懂的方法來說明經濟學是什么，它的作用邊界在哪里：\r\n\n2 ”簡筆素描“與”油畫肖像“我們給人畫肖像畫，可以用簡筆素描，也可以用油畫肖像。油畫肖像可以在最大程度上保存了人物的各方面的細節和特點，而簡筆素描則忽略了很多細節。盡管簡筆素描忽略了人物的許多細節，但我們仍舊能夠很容易的認出畫中的人物是誰。為什么？因為這種方法保留了人物最顯著的特征，以至于我們可以忽略其次要特征而對人物做出判定。\n\n2.1 ”簡筆素描“對于絕大多數的非經濟學專業大眾而言（經濟學相關專業碩士學歷以上），人們所接觸到的經濟學都是初級微觀經濟學。所謂的初級微觀經濟學，對于經濟問題的”畫法“就是一種”簡筆素描“。比如初級微觀經濟學教材中廣為使用的這種一元一次需求函數：y=bx+a，需求量的唯一變量是產品價格。但僅憑直覺我們就可以斷言，現實中影響需求量的因素絕不止價格這一種，因此我們可以認為這個模型對經濟問題的描述是失真的。然而但這種失真卻是必要的和有意義的，其意義在與它利于揭示價格對于需求的影響，而不在于否定影響需求的其他因素——", imgSrc: "/images/post/sls.png", headImgSrc: "/images/post/sls.png", reading: 62, collection: 92, author: "知乎", date: "Nov 12 2016", dateTime: "三天前", avatar: "/images/avatar/3.png", postId: 2, music: { url: "http://music.163.com/song/media/outer/url?id=32835566", title: "從前的我", coverImg: "http://p3.music.126.net/1qdwtD9QaawDmX3JUE9raw==/109951162932623462.jpg" } }, { title: "微信·小程序開發工具安裝指南", content: "這兩天閑來無事，也安裝了 “微信折疊”的開發工具來玩一下。以下是一些小道消息及使用體驗，過兩天我會寫一篇文章以開發者的角度來詳細評價微信小程序", imgSrc: "/images/post/xiaolong.jpg", reading: 102, detail: "這兩天閑來無事，也安裝了 “微信折疊”的開發工具來玩一下。以下是一些小道消息及使用體驗，過兩天我會寫一篇文章以開發者的角度來詳細評價微信小程序:微信小程序不能開發游戲類、直播類功能，小程序每個人關注的上限是20個（還不確定，不過我相信這是真的，這次公布的API里并沒有視頻組件。微信太大，蘋果要有所顧忌，但是微信也要做出相應的讓步)微信目前有沒有同蘋果商談好，還是個未知數，畢竟會對AppStore有一定的沖擊。拋棄了大量的javascript組件后，這個生態體系變得相當的封閉，微信解釋肯定是：為了更好的性能提升。那么我們拭目以待。小程序的入口是微信里的三級菜單，就是在“Tab欄發現里的游戲下面加入一個“小程序”。反正，這一欄里的購物和游戲我是從來沒點進去過的。以騰訊的尿性，小程序同服務號一樣，其關系鏈及重要功能的開放程度會因“人”而異。對，優質的接口只會開放給騰訊的兒子們（滴滴呀、京東呀）", collection: 92, dateTime: "24小時前", headImgSrc: "/images/post/xiaolong.jpg", author: "貓是貓的貓", date: "Nov 20 2016", avatar: "/images/avatar/5.png", postId: 3, music: { url: "http://music.163.com/song/media/outer/url?id=303283 ", title: "愛情呼叫轉移", coverImg: "http://p4.music.126.net/KfA50nsD2BVup_ACFRGPPA==/19017153114621423.jpg", } }, { title: "從視覺到觸覺這款VR手套能給你真實觸感", content: "8月29日消息，據國外媒體VentureBeat報道，一家名為Dexta Robotics的公司最近發布了一款有望變革虛擬現實手部追蹤與交互方式的新產品", imgSrc: "/images/post/vr.png", reading: 102, detail: "消息，據國外媒體VentureBeat報道，一家名為Dexta Robotics的公司最近發布了一款有望變革虛擬現實手部追蹤與交互方式的新產品。該產品名為“Dexmo”，它是一款像手套那樣戴在手上使用的未來主義外骨骼。它內置大量的元件，能夠與VR體驗進行交互，可幫助你感覺握在你的雙手的虛擬物體。Dexmo據Dexta稱，“Dexmo是一款針對你的雙手的機械外骨骼。它能夠捕捉你的手部運動，以及提供即時的力反饋。有了Dexmo，你可以感受到虛擬物體的大小、形狀和堅硬度。你可以接觸數字世界。”市面上已經有數款產品旨在處理虛擬現實中的手部交互，也有相關的產品即將要進入市場。例如，頗受歡迎的HTC Vive頭盔配有一副控制器，其控制器能夠使得追蹤系統看到你的雙手，讓你可以用它們來在特定體驗中與物體進行交互。今年晚些時候，Oculus將開始出貨類似的手部控制產品Oculus Touch。10月，索尼也將開始出貨配備兩個PlayStation Move手部控制器的PS VR。Leap Motion甚至更進一步：利用傳感器來追蹤手指和手部的運動。", collection: 26, dateTime: "24小時前", headImgSrc: "/images/post/vr.png", author: "深白色", date: "Nov 20 2016", avatar: "/images/avatar/3.png", postId: 4, music: { url: "http://music.163.com/song/media/outer/url?id=32835566", title: "往后余生", coverImg: "http://p3.music.126.net/T1nKA7zWLb8Y2vnzc5CeCQ==/3431575792207860.jpg" } }, { title: "愛奇藝創維開展戰略合作，合力布局開放娛樂生態", content: "愛奇藝和創維分別作為國內領先的在線視頻品牌", imgSrc: "/images/iqiyi.png", reading: 96, detail: "愛奇藝和創維分別作為國內領先的在線視頻品牌和家電品牌。雙方一直銳意創新，為用戶提供優質的服務體驗和產品體驗。據悉，愛奇藝與創維將展開從資本到VIP會員服務等各方面的深入合作。籍由此次合作，愛奇藝將戰略投資創維旗下擁有高端互聯網電視品牌的酷開公司。從下一財年開始，創維旗下互聯網電視將通過銀河互聯網電視集成播控平臺，預置VIP會員服務及相關內容。這種捆綁終端與VIP內容的全新銷售模式，將大幅提升互聯網電視終端用戶的體驗，給予用戶更多優質內容的選擇。", collection: 26, dateTime: "21小時前", headImgSrc: "/images/iqiyi.png", author: "深白色", date: "Nov 20 2016", avatar: "/images/avatar/5.png", postId: 5, music: { url: "http://music.163.com/song/media/outer/url?id=186240", title: "朋友-譚詠麟", coverImg: "http://p4.music.126.net/9PrJFGyL4jvNEQ1vFjMzzA==/3442570914300329.jpg" } }, ] module.exports = { postList: local_database } ```