最近微信小程序很火,于是趁機學(xué)了一下。然后做了個小的demo,實現(xiàn)了查看B站排行榜的功能。
項目地址 https://github.com/congjiujiu/bilibiliRank
由于沒有appid,所以沒法在微信里面預(yù)覽。可以clone到本地然后在微信web開發(fā)工具里面看到項目。
即可查看了。
效果gif可以看 github 的演示!
先創(chuàng)建初始頁面,也就是兩部分,頂上圖片,以及下方列表。
用你喜愛的編輯器打開 pages/index/index.js,編輯一下
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
data: {
bili: {
list: [
{
id: 0,
name: '全區(qū)排行榜'
},
{
id: 1,
name: '番劇排行榜'
},
{
id: 2,
name: '原創(chuàng)視頻排行榜'
}
]}
},
onLoad: function () {
console.log('onLoad');
}
})
|
表明有三個列表項,然后就可以在index.wxml里面獲得數(shù)據(jù)了
<!--index.wxml-->
<view class="container">
<view class="header"></view>
<view class="content">
<view class="cmds">
<navigator wx:for="{{bili.list}}" url="../ranklist/ranklist?id={{item.id}}">
<view class="cmd-list" data-id="{{item.id}}">{{item.name}}</view>
</navigator>
</view>
</view>
</view>
|
如上,一個header,通過設(shè)置background-image來設(shè)置頭圖,下方通過wx:for方法來循環(huán)生成一個列表。navigator標簽,可以在點擊的時候跳轉(zhuǎn)到url指定的組件內(nèi)。類似于原生的a標簽。
然后設(shè)置一下css,在app.wxss內(nèi):
/**app.wxss**/
.container {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei", Monaco;
height: 100%;
}
.header {
height: 140px;
width: 100%;
background-image: url(images/logo.jpg);
background-size:
|
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)