小程序模板网

丛九九微信小程序demo实战教程:Bilibili排行榜

最近微信小程序很火,于是趁机学了一下。然后做了个小的demo,实现了查看B站排行榜的功能。

项目地址 https://github.com/congjiujiu/bilibiliRank

由于没有appid,所以没法在微信里面预览。可以clone到本地然后在微信web开发工具里面看到项目。

  • git clone https://github.com/congjiujiu/bilibiliRank.git yourappname
  • cd yourappname
  • 在微信web开发工具里面新建项目,地址选到刚clone的地址

即可查看了。

效果gif可以看 github 的演示!

建立项目

先创建初始页面,也就是两部分,顶上图片,以及下方列表。

用你喜爱的编辑器打开 pages/index/index.js,编辑一下


					
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
bili: {
list: [
{
id: 0,
name: '全区排行榜'
},
{
id: 1,
name: '番剧排行榜'
},
{
id: 2,
name: '原创视频排行榜'
}
]}
},
onLoad: function () {
console.log('onLoad');
}
})

表明有三个列表项,然后就可以在index.wxml里面获得数据了


					
<!--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,通过设置background-image来设置头图,下方通过wx:for方法来循环生成一个列表。navigator标签,可以在点击的时候跳转到url指定的组件内。类似于原生的a标签。

然后设置一下css,在app.wxss内:


					
/**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:


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/22941.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询