小程序组件之view

2016-10-26
#微信小程序

这篇文章将向大家介绍小程序控件之view

开始我们的项目

  • 创建一个工程，命名wx4,打开wx3,将里面的代码复制到wx4中

  • 选中pages文件夹下的index文件夹下的index.wxml文件，给view组件加入一个id属性,用于传入页面详情页,如下所示：

    1
    2
    3
    4
    5
    6
    <scroll-view class="ui_menu" scroll-y="true">
        <view class="cell" wx:for="{{lists}}" bindtap="cellClick" id="{{index}}">
            <text class="ui_name">{{item.name}}</text>
            <text class="ui_des">{{item.des}}</text>
        </view>
    </scroll-view>

  • 选中pages文件夹下的index文件夹下的index.js文件，改写我们的cellClick 函数,将对应组件的索引index，传入到detail页面，如下所示：

    1
    2
    3
    4
    5
    6
    7
    //表示点击 `cell` 将跳转到对应详情页 
    cellClick: function(e){
       console.log(e.currentTarget.id);
        wx.navigateTo({
          url: '../detail/detail?index=' + e.currentTarget.id
        });
      },

  • 新建一个详情页目录detail,在此目录下，分别创建：detail.js、detail.wxml、detail.wxss文件

  • 找到我们的 app.json文件，加入页面目录detail

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs",
        "pages/detail/detail"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "小程序组件",
        "navigationBarTextStyle":"black"
      }
    }

  • 选中pages文件夹下的detail文件夹下的detail.js文件,键入如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var app = getApp();
    Page({
        data: {
            // 用于标记是哪个控件的详情页，默认为 -1，表示为空
            index: -1
        },
        onLoad: function(opts){
            console.log("detail页面数据加载完成，传入过来的index为"+opts.index);
            this.setData({
                // 改变index的值
               index: opts.index
            });
        } 
           
    });

  • 选中pages文件夹下的detail文件夹下的detail.wxml文件,键入如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <block wx:if="{{index == 0}}">
        <view class="warp">
            <view class="header">header</view>
            <view class="content">
                <view class="main">
                圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。
                页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。
                其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
                如果是小屏幕，躯干的三栏自动变为垂直叠加。
                </view>
                <view class="left">left</view>
                <view class="right">right</view>
            </view>
            <view class="footer">footer</view>   
        </view>
    </block>

其中 block用于条件渲染，用于判断是否需要渲染该代码块，此处代码的意思是，如果 index==0,则渲染该模块

  • 选中pages文件夹下的detail文件夹下的detail.wxss文件,键入如下代码： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    	.warp {
        display: flex;
        flex-direction: column;
    }
    .header , .footer {
       flex: 1; 
       background-color: black;
       color: white;
    }
    .content {
        display: flex;
        flex: 1;
    }
    .main {
        flex: 1;  
    }
    .left , .right {
        flex: 0 0 12rem;
        max-width: 100px;
    }
    .left {
        order: -1;
    }
    @media (max-width: 768px) {
        .content {
        flex-direction: column
        }
        .main,.left,.right {
            flex:auto;
        }
        .left , .right {
            max-width: 100%;
        }
    }
    /*添加背景颜色*/
    .main{
        background-color: orange;
    }
    .left {
       
        background-color: blue;
    }
    .right {
        background-color: red;
    }

此处用到的知识是 CSS中的弹性布局，大家可以参考阮一峰的网络日志:Flex 布局教程

本文代码

请查看此目录下面的 wx4 文件夹