index.wxml
<view class='root'><view class='tabs'><view class='item active'><text>个性推荐</text></view><view class='item'><text>歌单</text></view><view class='item'><text>主播电台</text></view><view class='item'><text>排行版</text></view></view><scroll-view class='content' scroll-y><view class='slide'><swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150" /></swiper-item></block></swiper></view><view class='portals'><view class='item'><image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549516721&di=03e05e894ada2dd7a58c8d1eca69ea41&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201401%2F25%2F20140125184011_tzUmP.jpeg'></image><text>私人FM</text></view><view class='item'><image  src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549516721&di=03e05e894ada2dd7a58c8d1eca69ea41&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201401%2F25%2F20140125184011_tzUmP.jpeg'></image><text>每日歌曲推荐</text></view><view class='item'><image  src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549516721&di=03e05e894ada2dd7a58c8d1eca69ea41&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201401%2F25%2F20140125184011_tzUmP.jpeg'></image><text>云音乐新歌榜</text></view></view><view class='list'><view class='title'><text>推荐歌单</text></view><view class='inner'><view class='item'><navigator url='../news/news'><image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image></navigator><text>五月天</text></view><view class='item'><image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image><text>五月天</text></view><view class='item'><image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image><text>五月天</text></view><view class='item'><image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image><text>五月天</text></view><view class='item'><image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image><text>五月天</text></view><view class='item'><image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548920344022&di=7c81b3613951c6c141804fcbd8d9cc16&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F25%2F20150925223027_x5iRt.jpeg'></image><text>五月天</text></view></view></view></scroll-view><view class='player'><view class='poster'><image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549516721&di=03e05e894ada2dd7a58c8d1eca69ea41&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201401%2F25%2F20140125184011_tzUmP.jpeg'></image></view>  <view class='controls'><view class='info'><text class='title'>顽固</text><text class='artist'>五月天</text></view><image src=''></image><image src=''></image><image src=''></image></view></view>           </view>

index.wxss

page{height: 100%;
}
.root{display:flex;flex-direction: column;height: 100%;background-color: grey;
}.tabs{display:flex;background-color: pink;}
.tabs .item{padding: 12rpx 0;flex: 1;background-color: #222;color: #ccc;text-align: center;font-size: 28rpx;}
.tabs .item.active{color: #fff;border-bottom: 5rpx solid #e9232c;}
.content {flex: 1;background-color: rgba(24, 2, 2, 0.404);display: flex;flex-direction: column;overflow: hidden;}
.slide image{height: 260rpx;background-color: gray;width: 100%;
}
.portals .item{flex: 1;
}
.portals .item image{width:160rpx;height: 160rpx;background-color: green;display: block;margin: 20rpx auto;}
.portals .item text{font-size: 24rpx;text-align: center;display: block;}
.portals{display: flex;width: 100%；}.player{display: flex;height: 95rpx;background: white;flex-direction: row;
}.info {flex: 1;color: rgb(24, 2, 2);font-size: 28rpx;
}.info .title{display: block;font-size: 28rpx;
}.controls image{width: 80rpx;height: 80rpx;background-color: blue;margin: 2rpx;}.poster image{width: 80rpx;height: 80rpx;background-color: black;margin: 10rpx;
}
.controls{display: flex;flex: 1;margin-top: 10rpx;
}
.list .title{margin: 10rpx 20rpx;font-size: 28rpx;}
.list .inner{display: flex;flex-wrap: wrap;}
.list .inner .item{width:33.33%
}
.list .inner .item image{width:240rpx;height: 240rpx;display: block;margin: 0 auto;
}
.list .inner .item text{font-size: 30rpx;text-align: center;display: block;margin:15rpx;color: whitesmoke;
}

2019.1.31日【小程序前端页面剩下JS了，基本的数据传导和页面跳转没问题了】相关推荐

active server pages 错误 asp 0126_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误...
点击观看视频 ↓↓↓ 小程序前端页面初始配置.ESlinthttps://www.zhihu.com/video/1195030595196223488 课程文字版 1.修改src/pages文件夹 ...
小程序前端性能测试_如何提高前端应用程序的性能
小程序前端性能测试 If your website takes longer than 3 seconds to load, you could already be losing nearly ha ...
mysql的数据现实在小程序_使用phpstudy将本地mysql数据显示在微信小程序前端
使用phpstudy将本地mysql数据显示在微信小程序前端第一步:新建小程序在pages文件里新建一个phptest文件夹,如果你不知道操作,建议先学小程序的基础知识第二步:写phptest. ...
云之道律师小程序源码V1.2.8完整全开源安装包+小程序前端
简介: 云之道律师小程序是连接用户和律师两端的法律服务平台. 解决传统形式三大痛点, 专业程度不一(在不同细分的擅长领域, 律师的专业程度都不一样), 匹配困难(由于信息差, 用户很难找到合适的律师进 ...
微信小程序框架——微信小程序前端开发工具
微信小程序框架框架小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 Java ...
表单－微信小程序前端制作切片演示
小程序前端制作-表单切片,内含服务器端.小程序所有文件.切片文件(可以用小程序切片软件打开再次编辑).效果图内含以下栏目: 新增校园经历组织/公司名称职位开始时间结束时间经历描述资源下载 ...
小程序前端获取手机号码
小程序前端获取手机号码正常开发中,前端通过getUserInfo来获取用户的code,并且在用户点击授权获取手机号码的按钮后,将encryptedData提交给后端,后端通过openid及encry ...
微信小程序——前端——抵扣券、优惠券样式
微信小程序--前端--抵扣券.优惠券样式效果图: 实现思路: 左边+划线+右边==使用信息+分割线+使用限制整体底色: .wrapper {margin: 0 auto;width: 100%;d ...
小程序前端 wxml注释
小程序前端页面文件扩展名是wxml,注释有3种写法: 1.单行注释  2.多行注释 /* 小程序页面文件多行注释DEMO */ 3.结尾注释 ...
API——微信小程序前端开发工具
API 框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等. 说明: wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBA ...

2019.1.31日【小程序前端页面剩下JS了，基本的数据传导和页面跳转没问题了】

index.wxss

2019.1.31日【小程序前端页面剩下JS了，基本的数据传导和页面跳转没问题了】相关推荐

最新文章

热门文章