小程序开发 数组与列表

前言

　　此篇博客讲解微信小程序的数组与列表，在微信小程序里二者一般是组合使用并且关联性较强，所以放在一篇博客里讲解。 所以包含.js中data{}数组的样式、.js的数据处理、wx:for、.wxml里view与scroll-view，view与scroll-view的实现列表的区别.

 

一个简单的view列表

这个例子不加入.js data 数据的概念,只使用了view来实现了列表。 

效果图：

 

 

 

viewdemo.wxml

<!--pages/demo/demo.wxml-->
<view class="demoview">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

 

viewdemo.wxss

/* pages/demo/demo.wxss */
.demoview view{
    width: 100px;
    height: 100px;
    /* 文字排列 */
    text-align:center;
    /* 行高 */
    line-height: 100px;
}
/* 指定某个child view的风格 */
.demoview view:nth-child(1){
    background-color: lightskyblue;  
}
.demoview view:nth-child(2){
    background-color:lightgreen;  
}
.demoview view:nth-child(3){
    background-color:lightsalmon;  
}
.demoview{
    /* 排列方式 */
    display:flex;
    /* 排列的时候的间距 元素中的各项周围留有空白*/
    justify-content: space-around;
}

scroll-view列表_纵向与横向滚动

效果图

scrollview.wxml

<!--pages/scrollview/scrollview.wxml-->
<!-- scroll-y 允许纵向滚动 -->
<!-- scroll-x 允许横向滚动 -->
<view>
    <scroll-view class="scrollview" scroll-y>
        <view>A</view>
        <view>B</view>
        <view>C</view>
        <view>D</view>
        <view>E</view>
        <view>F</view>
        <view>G</view>
    </scroll-view>
    <scroll-view class="scrollview2" scroll-x>
        <view>1</view>
        <view>2</view>
        <view>3</view>
        <view>4</view>
        <view>5</view>
        <view>6</view>
        <view>7</view>
    </scroll-view>
</view>

scrollview.wxss

/* pages/scrollview/scrollview.wxss */
/* 
==================纵向===================
*/
.scrollview view{
   width: 100%;
   height: 30%;
    /* 文字排列 */
    text-align: center;
    line-height: 100px;
    background-color: white;
}

.scrollview :nth-child(1){
   /* 背景颜色 */
   background-color: lightsalmon;
}

.scrollview :nth-child(2){
    background-color: lightgreen;
 }
 
 .scrollview :nth-child(3){
    background-color: lightskyblue;
 }

 .scrollview :nth-child(4){
   /* 背景颜色 */
   background-color: lightgoldenrodyellow;
}

 .scrollview{
    background-color: wheat;
    /* 红色边框线 */
    border: 1px solid red;
    /* 纵向滚动必须给与高度 */
    height: 250px;
    width: 100%;
}

/* 
===================横向===================
*/
.scrollview2 view{
   width: 30%;
   height: 100%;
    /* 文字排列 */
    text-align: center;
    line-height: 300px;
    background-color: white;
    /* 子view设置一行 */
    display: inline-block
}

.scrollview2 :nth-child(1){
   /* 背景颜色 */
   background-color: lightsalmon;
}

.scrollview2 :nth-child(2){
    background-color: lightgreen;
 }
 
 .scrollview2 :nth-child(3){
    background-color: lightskyblue;
 }

 .scrollview2 :nth-child(4){
   /* 背景颜色 */
   background-color: lightgoldenrodyellow;
}

 .scrollview2{
    background-color: wheat;
    border: 1px solid red;
    height: 250px;
    width: 100%;
    /* 不换行，单行显示 */
    white-space: nowrap; 
    /* 排列方向设置 宫格 */
    display: flex;
    /* 排列方式设置为 一行 */
    flex-direction:row; 
}

 .js文件中data数组数据形式

 微信小程序中的.js文件中的data{} 本质上其实是json格式的。 所以在这里初始化数组数据也是以json的样式。 只是如果是动态初始化数据可以选择使用function动态初始化数组数据。

 固定初始化数据

    /**
     * 页面的初始数据
     */
    data: {
        userDataArray:[
            {
                name:"小明",
                age:11,
                sex:true
            },
            {
                name:"小李",
                age:12,
                sex:true
            },
            {
                name:"小红",
                age:12,
                sex:false
            },
            {
                name:"小天",
                age:12,
                sex:true
            },
        ]
    },

动态初始化数据

可以不用担心userDataArray因未在data中初始化而无法获得导致报错，因为wx:for 有空指针安全与观察者模式的特性。 只要你调用方法初始化完成后页面上会立刻显示数据。动态数据其实也可以是你网络请求后处理获得的数据，

    /**
     * 页面的初始数据
     */
    data: {

    },

    initData:function(e) {
        this.setData({
            userDataArray:[
                {
                    name:"小明",
                    age:11,
                    sex:true
                },
                {
                    name:"小李",
                    age:12,
                    sex:true
                },
                {
                    name:"小红",
                    age:12,
                    sex:false
                },
                {
                    name:"小天",
                    age:12,
                    sex:true
                },
            ]
        })
    },

wx:for 与 View

 在小程序中展示列表数据都需要依靠wx:for这个属性，这个属性其实很简单。 但是它的作用域需要你特别注意，初学者很容易被直觉影响而错误使用。下面展示一个错误的例子和一个正确的例子做对比：

效果图：

 

 

.js

    /**
     * 页面的初始数据
     */
    data: {
        fruits:[
            {name:'苹果'},
            {name:'香蕉'},
            {name:'雪梨'},
            {name:'哈密瓜'},
            {name:'樱桃'},
            {name:'芒果'},
            {name:'李子'},
            {name:'青梅'},
            {name:'莲雾'},
            {name:'西瓜'},
            {name:'桃子'},
            {name:'火龙果'},
            {name:'荔枝'},
            {name:'青枣'},
            {name:'橘子'},
            {name:'龙眼'},
            {name:'橙子'},
            {name:'西柚'},
            {name:'葡萄'},
        ]
    },

错误例子：

<scroll-view scroll-y="true" wx:for="{{fruits}}">
    <view> 水果名称 = {{item.name}}</view>
</scroll-view>

正确例子：

<scroll-view scroll-y="true">
    <view wx:for="{{fruits}}"> 水果名称 = {{item.name}}</view>
</scroll-view>

上面2个例子其实都可以显示完全一模一样列表效果。错误例子的错误关键是让scroll-view进行了数组数量的创建，每一个显示的列表item都是scroll-view。这是不合理的，因为scroll-view只是我们的父类容器用于控制列表内容的显示范围与滚动方向。

所以第二个例子才是正确的，它重复创建了view展示了列表内容。所以，这里可以明白wx:for 其实是作用在调用它的view上的（并且自动包含子布局）。

wx:for的其他相关属性使用

wx:for-item=""
wx:for-index=""
wx:key=""

请注意，如果不添加wx:key=""可能会出现警告，如果你有强迫症可以添加key="this"或者key="某个json字段"

.js

/**
     * 页面的初始数据
     */
    data: {
        title:"主页",
        list:[
            {"name":"小明", "age":11},
            {"name":"小刚", "age":12},
            {"name":"小天", "age":13}
        ],
        listNum:[0,1,2,3,4]
    },

.wxml

<!-- wx:key是需要填入唯一值字段 
     wx:for-item="item" wx:for-index="index" 可以不写，因为已经默认添加了这2个属性
 -->
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="">
    索引:{{index}}
    学生名称:{{item.name}}
    学生年龄:{{item.age}}
</view>
<!-- 在循环单纯的数组时可以直接添加 wx:key="*this"-->
<view wx:for="{{listNum}}" wx:key="*this" wx:for-item="item"> 
    数值:{{item}}
</view>

效果图：

 

 

 

wx:for的横向排列

在上面的wx.for可以看到竖向排列的样子，那是因为添加了wx.for的view，会默认成竖向。这里添加的wx.for的view已经类似于正常编程语言中经常使用的for了。你给它添加任何wxss布局有样式都不会有效果出现。必须在外面在套一个view添加横向的布局样式

效果图：

wxml

<view>
    <view class="child-container">
        <view wx:for="{{childList}}" wx:for-item="item" wx:for-index="index">
            <text class="child-item">{{item.name}}</text>
        </view>
    </view>
</view>

wxss

.child-container {
    width: 100%;
    height: 50px;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
}

.child-item {
    width: 50px;
    height: 50px;
    background-color: aquamarine;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
}

 

scroll-view的下拉刷新功能

 

与下拉刷新有关的属性

refresher-enabled 　　　　　　　　　　 boolean false 否 开启自定义下拉刷新
refresher-threshold 　　　　　　　　　   number 45 否 设置自定义下拉刷新阈值
refresher-default-style　　　　　　　　   string "black" 否 设置自定义下拉刷新默认样式，支持设置 `black | white | none`， none 表示不使用默认样式
refresher-background 　　　　　　　　  string "#FFF" 否 设置自定义下拉刷新区域背景颜色
refresher-triggered 　　　　　　　　       boolean false 否 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 2.10.1
bindrefresherpullingeventhandle　　　　 否自定义下拉刷新控件被下拉（会被多次回调触发）
bindrefresherrefresheventhandle　　　　否自定义下拉刷新被触发
bindrefresherrestoreeventhandle　　　　否自定义下拉刷新被复位
bindrefresheraborteventhandle　　 　　  否自定义下拉刷新被中止

效果图：

 

 

.wxml

<!--pages/demo4/demo4.wxml-->
<view>使用scroll-view列表</view>

<scroll-view style="height: 300px; background-color: tan;" bindrefresherpulling="refresherpulling" 
     bindrefresherrefresh="refresherrefresh" refresher-enabled="true" refresher-background="#d31313" refresher-triggered="{{isRefresh}}" scroll-y>
    <view wx:for="{{fruits}}" wx:key="name"> 水果名称 = {{item.name}}</view>
</scroll-view>

.js

// pages/demo4/demo4.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isRefresh: false,
        fruits: [{
                name: '苹果'
            },
            {
                name: '香蕉'
            },
            {
                name: '雪梨'
            },
            {
                name: '哈密瓜'
            },
            {
                name: '樱桃'
            },
            {
                name: '芒果'
            },
            {
                name: '李子'
            },
            {
                name: '青梅'
            },
            {
                name: '莲雾'
            },
            {
                name: '西瓜'
            },
            {
                name: '桃子'
            },
            {
                name: '火龙果'
            },
            {
                name: '荔枝'
            },
            {
                name: '青枣'
            },
            {
                name: '橘子'
            },
            {
                name: '龙眼'
            },
            {
                name: '橙子'
            },
            {
                name: '西柚'
            },
            {
                name: '葡萄'
            },
        ]
    },

    refresherpulling: function (e) {
        console.log("自定义下拉刷新控件被下拉     = " + e.detail.value)

    },

    refresherrefresh: function (e) {
        console.log("自定义下拉刷新被触发 = " + e.detail.value)
        var myTimer = setInterval(() => {
            this.setData({
                isRefresh: false
            })
            this.refreshData()
            clearInterval(myTimer); //销毁定时器 
        }, 1000) //定时循环的时长 毫秒 ，1秒=1000毫秒
    },

    refreshData:function () {
        this.setData({
            fruits:[
               {
                name:"菠菜"
               },
               {
                name:"黄瓜"
               },
               {
                name:"西红柿"
               },
               {
                name:"南瓜"
               },
            ]
        })
    }
}) 

scroll-view与view的区别

 区别是：

1.高度与宽度的设置

2.滚动方向的设置

3.下拉刷新等等

以view作为父类容器无法限制列表的高度，也无法设置滚动的方向。所以在选择上，如果是简单且内容固定不需要滚动的菜单上选择view，在需要滚动，上拉下拉加载的内容上选择scroll-view

效果图：

代码：

.wxml

<!--pages/demo4/demo4.wxml-->
<view>使用scroll-view列表</view>

<scroll-view style="height: 100px; background-color: aqua;" scroll-y>
    <view wx:for="{{fruits}}"> 水果名称 = {{item.name}}</view>
</scroll-view>

<view style="margin-top: 30px;">使用view列表</view>

<view style="height: 100px; background-color: tan;" >
    <view wx:for="{{fruits}}"> 水果名称 = {{item.name}}</view>
</view>

 

 

 

End