<import src="../common/list.wxml" /> <import src="../common/tab.wxml" /> <template name="rankitem"> <view class="rank-item"> <navigator url="/pages/online/list?type={{item.type}}" class="text">{{item.text}}</navigator> <view class="arrow"></view> </view> </template> <!--index.wxml--> <view class="container"> <template is="tab" data="{{list: tab, active: tabActive}}" /> <view class="rank-list"> <template is="rankitem" wx:for="{{ranks}}" data="{{item: item}}" /> </view> </view> |
/**index.wxss**/ .rank-list{ width: 100%; /*padding: 0.5rem;*/ } .rank-item{ width: 100%; text-align: left; height: 3rem; line-height: 3rem; border-bottom: 1px solid #eee; position: relative; } .rank-item .text{ padding-left: 1rem; } .rank-item .arrow{ width: 10px; height: 10px; border-top: 2px solid #999; border-right: 2px solid #999; /*float: right;*/ position: absolute; right: 20px; transform: rotate(45deg); top: 20px; } |
var api = require('../../utils/api.js') //index.js //获取应用实例 var app = getApp() Page({ data: Object.assign({ tabActive: 'rank' }, app.globalData.data), //事件处理函数 onReady: function(){ wx.setNavigationBarTitle({title: "在线音乐"}) } }) |
模板简介:该模板名称为【微信小程序在线音乐排行榜页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。