微信小程序开发--flex布局

{
  "usingComponents": {},
  "backgroundTextStyle": "dark",
  "navigationBarBackgroundColor": "#0e0e0e",
  "navigationBarTitleText": "Music Player",
  "navigationBarTextStyle": "white"
}
<!--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">
      <image src="../images/slide.png">
      </image>
    </view>
    <view class="portals">
      <view class="item">
        <image src="../images/04.png"></image>
        <text>私人FM</text>
      </view>
      <view class="item">
        <image src="../images/05.png"></image>
        <text>每日歌曲推荐</text>
      </view>
      <view class="item">
        <image src="../images/06.png"></image>
        <text>云音乐新歌榜</text>
      </view>
    </view>

    <view class="list">
      <view class="title">
        <text>推荐歌单</text>
      </view>
      <view class="inner">
        <view class="item">
          <image src="../images/poster.jpg"></image>
          <text>一生中最爱的人</text>
        </view>
        <view class="item">
          <image src="../images/poster.jpg"></image>
          <text>一生中最爱的人</text>
        </view>
        <view class="item">
          <image src="../images/poster.jpg"></image>
          <text>一生中最爱的人</text>
        </view>
        <view class="item">
          <image src="../images/poster.jpg"></image>
          <text>一生中最爱的人</text>
        </view>
        <view class="item">
          <image src="../images/poster.jpg"></image>
          <text>一生中最爱的人</text>
        </view>
        <view class="item">
          <image src="../images/poster.jpg"></image>
          <text>一生中最爱的人</text>
        </view>
      </view>
    </view>
  </scroll-view>
  <!-- 播放控制条 固定高度 -->
  <view class="player">
    <view class="poster">
      <image src="../images/poster.jpg"></image>
    </view>
    <view class="info">
      <text class="title">一生中最爱</text>
      <text class="artes">谭咏麟</text>
    </view>
    <view class="controls">
      <image src="../images/01.png"></image>
      <image src="../images/02.png"></image>
      <image src="../images/03.png"></image>
    </view>
  </view>
</view>
/**index.wxss**/

page {
  height: 100%;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f0f0f0;
  overflow: hidden;
}

.tabs {
  background: pink;
  display: flex;
}

.tabs .item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  background: #222;
  color: #ccc;
  padding: 8px 0;
}

.tabs .item.active {
  color: #fff;
  border-bottom: 2px solid #e9232c;
}

.content {
  flex: 1;
  background: #111214;
  color: #ccc;
  overflow: hidden;
}

.slide image{
  width: 100%;
  height: 130px;
}

.portals{
  display: flex;
  margin-bottom: 15px;
}
.portals .item{
  flex: 1;
}
.portals .item image{
  width: 60px;
  height: 60px;
  display: block;
  margin: 10px auto;
}
.portals .item text{
  font-size:12px;
  text-align: center;
  display: block;
}

.list .title{
  margin: 5px 10px;
  font-size:14px;
}

.list .inner{
 display: flex;
 flex-wrap: wrap;
 /* warp 换行 */
}

.list .inner .item{
  width: 33.33333333%
}
.list .inner .item image{
  width: 120px;
  height: 120px;
  display: block;
  margin: auto;
}

.list .inner .item text{
  font-size:14px;
}
.player {
  height: 50px;
  background: #17181a;
  display: flex;
}

.poster image {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.info {
  flex: 1;
  color:#888;
  font-size:14px;
  margin: 5px;
}
.info .title{
  display: block;
  font-size: 16px;
  color: #ccc;

}

.controls image {
  width: 40px;
  height: 40px;
  margin: 5px 2px;
}

原文地址:https://www.cnblogs.com/DreamchaserHe/p/11213222.html

时间: 2024-10-10 16:51:19

微信小程序开发--flex布局的相关文章

微信小程序之Flex布局

微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的.Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间. flex布局 Flex布局的特点: 任意方向的伸缩,向左,向右,向下,向上 在样式层可以调换和重排顺序 主轴和侧轴方便配置 子元素的空间拉伸和填充 沿着容器对齐 微信小程序实

微信小程序开发--flex详细解读(2)

一.align-items和其参数  stretch / baseline 注:sretch只有在交叉轴没有设置固定长度的情况下才有作用                                  baseline是以第一个子元素为基准,后面的子元素与第一个子元素对齐. 二.flex-wrap 和其参数 row-wrap (默认)  /  wrap    / flex-wrap:作用---换行 flex布局,基础内容已经结束,欢迎大家一起交流. <view class="root&q

原创:新手布局福音!微信小程序使用flex的一些基础样式属性

来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明. 先来看看关于flex的一张图: 从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺

微信小程序开发 --02

微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码文件格式大体有以下四中: .wxml .wxss .js .json 首先,wxml后缀的文件类似于html和xml的结合,例如在html中常用的div在微信小程序开发中被替换成了view,而在html中输出文本用的p标签被替换成了text标签,引入图像由html中的img 标签变成了image标签,等等.如果你之前开发的w

微信小程序开发07-列表页面怎么做

接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有70%以上,如果再花一两天时间,便能跟之前工作做的差不多了,今天我们继续实现一个页面列表,便结束这次的学习,后面几天要出差,所以总结性的文章本周未必能出来,静待下周吧. 这里考虑demo复杂度,列表页功能完成度也仅仅完成主功能模块,与真实工作完成度对比60%左右吧,于是我们开始愉快的代码,首先是将我们

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

微信小程序开发入门教程

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:

微信小程序开发日记——高仿知乎日报(上)

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结

微信小程序_微信小程序开发,小程序源码、案例、教程

原文地址:http://whosmall.com/?post=448 本文标签: 微信小程序 小程序源码案例 小程序项目 小程序源码 微信小程序教程 什么是微信小程序? 微信小程序是微信基于微信平台的一个应用发布平台,微信小程序app开发属于原生app组件提供js接口的开发方式,比混合是app的用户体验更好,仅次于原生应用. 不过微信小程序定位于小,要符合轻量易用无需下载,所以从体积上也是有限制,整个小程序应用体积不能超过1M. 微信小程序的应用场景? 微信小程序的应用场景适用于轻量应用,非强交