Lin-UI Grid 组件 构建六宫格

Lin-UI官网资料

引入Lin-UI组件

因为没有经过引入的Lin-UI组件是不能使用的，所以必须要在json文件中引入，但是一个组件在一个文件中需要使用就要引入一次，这样很不方便，所以我们在app.json文件中引入组件

输入组件名和组件的相对路径

"usingComponents":{
    "l-gird":"/miniprogram_npm/lin-ui/grid/index",
    "l-gird-item":"/miniprogram_npm/lin-ui/grid-item/index"
}

组件名为l-gird是为了区别区别微信小程序中自带的组件和Lin-UI组件

使用Lin-UI构建自定义组件

自定义组件文件目录

wxml

<view class="container">
    <l-grid row-num="3" l-class="inner-container">
        <block wx:for="{{grid}}">
            <l-grid-item key="{{index}}" slot="{{index}}">
                 <view class="grid-item">
                    <image class="img" src="{{item.img}}"/>
                    <text class="text">{{item.title}}</text>
                 </view>
            </l-grid-item>
        </block>
    </l-grid>
</view>

wxss

.container {
    width: 100%;
    height: 320rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.inner-container {
    width: 730rpx;
    height: 300rpx;
    border: 1px dashed #DCEBE6;
}

.grid-item{
    /* 高度不需要自己设置，Lin-UI会自动设置 */
    /* 但是宽度最好自己设置，因为后期需要点击，如果不设置宽度，那么点击的范围就过小，不方便 */
    width: 200rpx; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img {
    width: 60rpx;
    height: 60rpx;
}

.text {
    margin-top: 6rpx;
    font-size: 24rpx;
    color: #333333;
}

js

接收父组件传递的数据（类型和初始值）

// 类型为Array，无默认初始值  
properties: {
    "grid":Array
  },

或者也可以写为

  properties: {
    grid:{
        type:Array,
        value: []
    }
  },

###页面文件夹的js文件请求数据

wxml中需要绑定数据，我们可以在自定义组件的js文件中完成业务逻辑，但是更为正规的是在父组件请求数据，父组件将数据传递给子组件，子组件处理数据

为了不让页面文件夹中的js文件过于复杂，也便于维护，我们在model文件夹进行业务的处理

这里使用到了封装的函数

export class Http {
    static async request({ url, data, callback, method = 'GET' }) {
        const res = await promisic(wx.request)({
            url: `${config.apiBaseUrl}${url}`,
            data,
            method, 
            header: {
                appkey: config.appkey
            }
        })
        return res.data
    }
}

model/category.js

import { Http } from "../utils/http"

class Categroy {
    static async getGridCategory() {
        return await Http.request({
            url: `category/grid/all`
        })
    }
}

export {
    Categroy
}

页面文件夹的js文件

data:{
    grid:[ 	] 
},

    onl oad: async function (options) { 
        this.initAllData();
    },

async initAllData(){
	const category = await Categroy.getGridCategory();
	this.setData({
		grid:category
	})
},

页面文件夹的html文件

向子组件传递参数

<s-categroy-grid grid="{{grid}}"></s-categroy-grid>

getGridCategory();
this.setData({
grid:category
})
},

**页面文件夹的html文件**

向子组件传递参数

```html
<s-categroy-grid grid="{{grid}}"></s-categroy-grid>