微信小程序：WeUI组件库的使用

本文主要是介绍微信小程序：WeUI组件库的使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

WeUI组件库，基于样式库weui-wxss (opens new window)开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。

传送门：WeUI组件库

app.json

  "useExtendedLib": {
    "weui": true
  },

index.json

{
  "usingComponents": {
    "mp-icon": "weui-miniprogram/icon/icon",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  }
}

index.wxml

<mp-cells ext-class="my-cells" title="">
    <mp-cell value="门诊名称" footer="医院等级"></mp-cell>
    <mp-cell wx:for="{{lockdata}}">
        <view>{{item.poi_name}}</view>
        <view slot="footer">{{item.poi_category}}</view>
    </mp-cell>
</mp-cells>

index.js

Page({
  data: {
    motto: 'lockdatav',
    lockdata: []
  },

  onl oad() {
    wx.request({
        url: 'https://py.lockdata.cn/api/api.json',
        data: {},
        success: data => {
          //console.log(data.data.data)
          const lockdata = data.data.data
          this.setData({
            lockdata: lockdata
          })
        },
        fail: err => {
          console.log(err)
        }
      })
  }
})

@lockdata.cn

这篇关于微信小程序：WeUI组件库的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！