【微信小程序】6天精准入门(第4天:自定义组件及案例界面)附源码

一、自定义组件

1、介绍

        从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

        开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似

2、创建自定义组件

类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可将这一组文件设为自定义组件):

{"component": true
}

同时,还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。

在项目中创建一个components/tabs文件夹,新建Component文件

【注意】

在新的版本里面我们会出现报错,但是在win7的一些旧版本里面是不会出现这些问题的,我们需要在project.config.json文件里面添加以下代码:

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,

同时,还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。

代码示例:

<view class="inner">{{innerText}}
</view>
<slot></slot>
/* 这里的样式只应用于这个自定义组件 */
.inner {color: red;
}

注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的。更多细节参见 Component构造器 。

代码示例:

Component({properties: {// 这里定义了innerText属性,属性值可以在组件使用时指定innerText: {type: String,value: 'default value',}},data: {// 这里是一些组件内部数据someData: {}},methods: {// 这里是一个自定义方法customMethod: function(){}}
})

3、使用自定义组件

使用已注册的自定义组件前,首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:

{"usingComponents": {"tabs": "/components/tabs/tabs"}
}

这样,在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。

在wxml里面使用<tabs>自定义标签

<tabs inner-text='6666'></tabs>

4、案例---头部导航

使用自定义组件,实现头部导航的一个效果

首先我们要在组件里面定义好

tabs.wxml

<view class="tabs"><view class="tabs_title"><view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}"><view style="margin-bottom:5rpx">{{item}}</view><view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view></view></view><view class="tabs_content"><slot></slot></view>
</view>

tabs.js

// components/tabs/tabs.js
Component({/*** 组件的属性列表*/properties: {//定义了组件所需要的属性值tabList:Object},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})

wxss

/* components/tabs/tabs.wxss */
.inner {color: red;}.tabs {position: fixed;top: 0;width: 100%;background-color: #fff;z-index: 99;border-bottom: 1px solid #efefef;padding-bottom: 20rpx;
}.tabs_title {/* width: 400rpx; */width: 90%;display: flex;font-size: 9pt;padding: 0 20rpx;
}.title_item {color: #999;padding: 15rpx 0;display: flex;flex: 1;flex-flow: column nowrap;justify-content: center;align-items: center;
}.item_active {/* color:#ED8137; */color: #000000;font-size: 11pt;font-weight: 800;
}.item_active1 {/* color:#ED8137; */color: #000000;font-size: 11pt;font-weight: 800;border-bottom: 6rpx solid #333;border-radius: 2px;
}

我们在指定的页面调用自定义好的组件

json文件里面设置调用组件

{"usingComponents": {"tabs" : "/components/tabs/tabs"}
}

wxml文件里面添加自定义的组件

<tabs tabList="{{tabs}}" bindtabsItemChange="tabsItemChange">
</tabs>

在js文件里面设置值

// pages/meeting/list/list.js
Page({/*** 页面的初始数据*/data: {tabs: ['会议中', '已完成', '已取消', '全部会议']},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

二、案例界面设置

完成会议、投票、个人中心页面的设计

1、会议

在上面已经拥有的基础上进行一个点击数据的展示

在自定义组件的js文件里面进行方法的编写

    /*** 组件的方法列表*/methods: {handleItemTap(e){// 获取索引const {index} = e.currentTarget.dataset;// 触发 父组件的事件this.triggerEvent("tabsItemChange",{index})this.setData({tabIndex:index})}}

在会议的页面的wxml文件里面进行页面的编写

<tabs tabList="{{tabs}}" bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"><view class="list" data-id="{{item.id}}"><view class="list-img al-center"><image class="video-img" mode="scaleToFill" src="{{item.image}}"></image></view><view class="list-detail"><view class="list-title"><text>{{item.title}}</text></view><view class="list-tag"><view class="state al-center">{{item.state}}</view><view class="join al-center"><text class="list-num">{{item.num}}</text>人报名</view></view><view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view></view></view>
</block>
<view class="section"><text>到底啦</text>
</view>

在js文件的里面模拟假的数据

/*** 页面的初始数据*/data: {tabs: ['会议中', '已完成', '已取消', '全部会议'],lists: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num': '304','state': '进行中','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num': '380','state': '进行中','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/3.jpg','title': 'H100太空商业大会','num': '500','state': '进行中','time': '10月09日 17:31','address': '大连市'},{'id': '1','image': '/static/persons/4.jpg','title': '报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”','num': '150','state': '进行中','time': '10月09日 17:21','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/5.jpg','title': '新质生活 · 品质时代 2016消费升级创新大会','num': '217','state': '进行中','time': '10月09日 16:59','address': '北京市·朝阳区'}],lists1: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num': '304','state': '已结束','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num': '380','state': '已结束','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/3.jpg','title': 'H100太空商业大会','num': '500','state': '已结束','time': '10月09日 17:31','address': '大连市'}],lists2: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num': '304','state': '已取消','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num': '380','state': '已取消','time': '10月09日 17:39','address': '北京市·朝阳区'}],lists3: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num': '304','state': '进行中','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num': '380','state': '已结束','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/3.jpg','title': 'H100太空商业大会','num': '500','state': '进行中','time': '10月09日 17:31','address': '大连市'},{'id': '1','image': '/static/persons/4.jpg','title': '报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”','num': '150','state': '已结束','time': '10月09日 17:21','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/5.jpg','title': '新质生活 · 品质时代 2016消费升级创新大会','num': '217','state': '进行中','time': '10月09日 16:59','address': '北京市·朝阳区'}]}

在下面编写一个方法,用来获取对应的数据

 tabsItemChange(e) {console.log(e)let tolists;if (e.detail.index == 0) {tolists = this.data.lists;} else if (e.detail.index == 1) {tolists = this.data.lists1;} else if (e.detail.index == 2) {tolists = this.data.lists2;} else {tolists = this.data.lists3;}this.setData({lists: tolists})}

完整代码

// pages/meeting/list/list.js
Page({/*** 页面的初始数据*/data: {tabs: ['会议中', '已完成', '已取消', '全部会议'],lists: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num': '304','state': '进行中','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num': '380','state': '进行中','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/3.jpg','title': 'H100太空商业大会','num': '500','state': '进行中','time': '10月09日 17:31','address': '大连市'},{'id': '1','image': '/static/persons/4.jpg','title': '报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”','num': '150','state': '进行中','time': '10月09日 17:21','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/5.jpg','title': '新质生活 · 品质时代 2016消费升级创新大会','num': '217','state': '进行中','time': '10月09日 16:59','address': '北京市·朝阳区'}],lists1: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num': '304','state': '已结束','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num': '380','state': '已结束','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/3.jpg','title': 'H100太空商业大会','num': '500','state': '已结束','time': '10月09日 17:31','address': '大连市'}],lists2: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num': '304','state': '已取消','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num': '380','state': '已取消','time': '10月09日 17:39','address': '北京市·朝阳区'}],lists3: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num': '304','state': '进行中','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num': '380','state': '已结束','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/3.jpg','title': 'H100太空商业大会','num': '500','state': '进行中','time': '10月09日 17:31','address': '大连市'},{'id': '1','image': '/static/persons/4.jpg','title': '报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”','num': '150','state': '已结束','time': '10月09日 17:21','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/5.jpg','title': '新质生活 · 品质时代 2016消费升级创新大会','num': '217','state': '进行中','time': '10月09日 16:59','address': '北京市·朝阳区'}]},tabsItemChange(e) {console.log(e)let tolists;if (e.detail.index == 0) {tolists = this.data.lists;} else if (e.detail.index == 1) {tolists = this.data.lists1;} else if (e.detail.index == 2) {tolists = this.data.lists2;} else {tolists = this.data.lists3;}this.setData({lists: tolists})},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

2、投票

绑定自定义组件

json

{"usingComponents": {"tabs" : "/components/tabs/tabs"}
}

wxml

<!--pages/vote/list/list.wxml-->
<!-- <text>投票</text> -->
<!-- <tabs inner-text='6666'></tabs> --><tabs tabList="{{tabs}}" bindtabsItemChange="tabsItemChange"><view class="search-container"><input class="search-input" bindinput="searchInputOne" placeholder="投票标题                    🔍" /><input class="search-input" bindinput="searchInputTwo" placeholder="投票选项                 🔍" /></view>
</tabs>
<!-- height: 120rpx;  -->
<view style="background-color: #aaa;"></view><view><block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"><view class="list" data-id="{{item.id}}"><view class="list-img al-center"><image class="video-img" mode="scaleToFill" src="{{item.image}}"></image></view><view class="list-detail"><view class="list-title"><text><text style="margin-right: 13rpx;"> 发 起 人</text> : {{item.name}}</text></view><view class="list-title"><text>会议名称 : {{item.title}}</text></view><view class="list-title"><text>投票标题 : [ {{item.vote}} ]</text></view><view class="list-tag"><view class="state al-center">{{item.state}}</view><view class="join al-center"><text class="list-count">{{item.count}}</text>人参与投票</view></view><view class="list-info"><text style="font-weight: bold;">地址:</text><text>{{item.address}}</text> <text style="float: right;">{{item.time}}</text> </view><view> <button class="btn">参与</button></view></view></view></block><view class="section bottom-line"><text>到底啦</text></view>
</view>

js

// pages/vote/list/list.js
Page({/*** 页面的初始数据*/data: {tabs: ['全部', '已投票', '未投票'],lists: [{'id': '1','image': '/static/persons/3.jpg','name': '张三','title': '报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”','vote': '是否认同与京东进行产品合作','count': '304','state': '未投票','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '2','image': '/static/persons/6.jpg','name': '刘兵','title': 'AIWORLD人工智能大会','vote': '是否投资AI发展','count': '480','state': '已投票','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '3','image': '/static/persons/3.jpg','name': '李四','title': '报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”','vote': '是否太空商业进行合作','count': '500','state': '未投票','time': '10月09日 17:31','address': '大连市'},{'id': '4','image': '/static/persons/7.jpg','name': ' 王五 ','title': '报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”','vote': '是否对本次创新持续升级','count': '217','state': '已投票','time': '11月20日 16:59','address': '北京市·朝阳区'}],lists1: [{'id': '1','image': '/static/persons/4.jpg','name': '赵六','title': '新质生活 · 品质时代 2016消费升级创新大会','vote': '是否认同与京东进行产品合作','count': '304','state': '已投票','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '2','image': '/static/persons/2.jpg','name': '管理员','title': '新质生活 · 品质时代 2016消费升级创新大会','vote': '是否投资AI发展','count': '480','state': '已投票','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '3','image': '/static/persons/3.jpg','name': '张三','title': 'H100太空商业大会','vote': '是否太空商业进行合作','count': '500','state': '已投票','time': '10月09日 17:31','address': '大连市'},{'id': '4','image': '/static/persons/5.jpg','name': ' 李四 ','title': 'CSDN消费升级创新大会','vote': '是否对本次创新持续升级','count': '217','state': '已投票','time': '11月20日 16:59','address': '北京市·朝阳区'}],lists2: [{'id': '1','image': '/static/persons/4.jpg','name': '张三','title': '深圳·北京PM大会','vote': '是否认同与京东进行产品合作','count': '422','state': '未投票','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '2','image': '/static/persons/6.jpg','name': '李四','title': 'AIWORLD人工智能大会','vote': '是否投资AI发展','count': '377','state': '未投票','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '3','image': '/static/persons/3.jpg','name': '王五','title': 'H100太空商业大会','vote': '是否太空商业进行合作','count': '463','state': '未投票','time': '10月09日 17:31','address': '大连市'},{'id': '4','image': '/static/persons/5.jpg','name': ' K&赵六 ','title': '2023消费升级创新大会','vote': '是否对本次创新持续升级','count': '543','state': '未投票','time': '11月20日 16:59','address': '北京市·朝阳区'}]},tabsItemChange(e) {console.log(e.detail);let tolists;if (e.detail.index == 0) {tolists = this.data.lists;} else if (e.detail.index == 1) {tolists = this.data.lists1;} else if (e.detail.index == 2) {tolists = this.data.lists2;} else {tolists = this.data.lists;}this.setData({lists: tolists})},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

wxss样式

/* pages/vote/list/list.wxss */.search-container {display: flex;justify-content: space-between;align-items: center;padding: 10px;background-color: #ffffff;border: cornsilk;}.search-input {width: 45%;padding: 8px;border-radius: 20px;border: 1px solid rgb(255, 255, 255);font-size: 14px;transition: border-color 0.3s;border: cornsilk;}.search-input:focus {outline: none;border-color: #51a7f9;}.search-input::placeholder {color: #999;}.search-input::-webkit-input-placeholder {color: #999;}.search-input::-moz-placeholder {color: #999;}.search-input:-ms-input-placeholder {color: #999;}/* .search-container {display: flex;justify-content: space-between;align-items: center;padding: 10px;background-color: #f0f0f0;}.search-input {width: 45%;padding: 8px;border-radius: 4px;border: 1px solid #ccc;font-size: 14px;} */
.list {display: flex;flex-direction: row;width: 100%;padding: 0 20rpx 0 0;background-color: seashell;border-bottom: 1px solid #cecece;margin-bottom: 5rpx;height: 350rpx;
}.list-img {display: flex;margin: 10rpx 10rpx;width: 160rpx;height: 250rpx;justify-content: center;align-items: center;flex-direction: column;
}.list-img .video-img {width: 140rpx;height: 160rpx;border-radius: 6px;
}.list-detail {margin: 10rpx 10rpx;display: flex;flex-direction: column;width: 600rpx;height: 300rpx;
}.list-title text {font-size: 9pt;color: #333;font-weight: bold;
}.list-detail {display: flex;height: 100rpx;
}.list-tag {display: flex;
}.state {font-size: 9pt;color: blue;width: 120rpx;height: 40rpx;border: 1px solid blue;border-radius: 2px;margin: 10rpx 0rpx;display: flex;justify-content: center;align-items: center;
}.join {font-size: 11pt;color: #bbb;margin-left: 20rpx;display: flex;justify-content: center;align-items: center;
}.list-count {margin-right: 10rpx;font-size: 11pt;color: red;
}.list-info {font-size: 9pt;color: #bbb;
}.btn {/* width: 10rpx;height: 40rpx;background-color: #3388ff;color: #fff;text-align: center;font-size: 16rpx;display: flex;justify-content: center;align-items: center; */background-color: #3388ff;color: #fff;border-radius: 4rpx;font-size: 16rpx;padding: 10rpx 20rpx;/* background-color: #3388ff;color: #fff;border-color: #3388ff; *//* width: 100rpx;height: 40rpx;border: 1rpx solid #3388ff;border-radius: 4rpx;font-size: 16rpx;background-color: #3388ff;color: #fff;outline: none;box-shadow: 0 0 5rpx #3388ff; *//* width: 60rpx;height: 30rpx;border-radius: 4rpx;font-size: 16rpx; *//* width: 40rpx;height: 40rpx;background-color: transparent;border: none;font-size: 24rpx;color: #666; */}.bottom-line {display: flex;height: 60rpx;justify-content: center;align-items: center;background-color: #f3f3f3;
}.bottom-line text {font-size: 9pt;color: #666;
}

3、个人中心

wxml

<!--pages/ucenter/index/index.wxml-->
<!-- <text>个人中心</text> -->
<view class="user"><image class="user-img"  src="/static/persons/1.jpg"></image><view class="user-name">无法自律的人</view><text class="user-state">状态:😊</text><text class="user-up">修改></text>
</view>
<view class="cells"><view class="cell-items"><image src="/static/tabBar/coding-active.png" class="cell-items-icon"></image><text class="cell-items-title">我主持的会议</text><text class="cell-items-num">99+</text><text class="cell-items-detail">🆗</text></view><view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view><view class="cell-items"><image src="/static/tabBar/sdk.png" class="cell-items-icon"></image><text class="cell-items-title">我参与的会议</text><text class="cell-items-num">99+</text><text class="cell-items-detail">❤</text></view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells"><view class="cell-items"><image src="/static/tabBar/sdk.png" class="cell-items-icon"></image><text class="cell-items-title">我发布的投票</text><text class="cell-items-num">89</text><text class="cell-items-detail">👍</text></view><view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view><view class="cell-items"><image src="/static/tabBar/coding-active.png" class="cell-items-icon"></image><text class="cell-items-title">我参与的投票</text><text class="cell-items-num">8</text><text class="cell-items-detail">></text></view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells"><view class="cell-items"><image src="/static/tabBar/template.png" class="cell-items-icon"></image><text class="cell-items-title">信息</text><text class="cell-items-ion">></text></view><view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view><view class="cell-items"><image src="/static/tabBar/component.png" class="cell-items-icon"></image><text class="cell-items-title">设置</text><text class="cell-items-ion">></text></view>
</view>

wxss

/* pages/ucenter/index/index.wxss */
Page {background-color: rgba(135, 206, 250, 0.075);
}.user {display: flex;width: 100%;align-items: center;background-color: white;margin-bottom: 28rpx;
}.user-img {height: 170rpx;width: 170rpx;margin: 30rpx;border: 1px solid #cdd7ee;border-radius: 6px;
}.user-name {width: 380rpx;margin-left: 20rpx;font-weight: 550;
}.user-state {color: rgb(136, 133, 133);
}.user-up {color: rgb(136, 133, 133);
}.cells {background-color: white;
}.cell-items {display: flex;align-items: center;height: 110rpx;
}.cell-items-title {width: 290rpx;
}.cell-items-icon {width: 50rpx;height: 50rpx;margin: 20rpx;
}.cell-items-num {padding-left: 30rpx;margin-left: 200rpx;width: 70rpx;
}.cell-items-ion {margin-left: 295rpx;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/164737.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 下安装配置部署MySql8.0

一 . 准备工作 MySQL安装包&#xff1a;在官网下载需要的版本&#xff0c;这里我用的版本是 MySQL 8.0.34 https://dev.mysql.com/downloads/mysql/ 本次linux机器使用的是阿里云ECS实例 二 . 开始部署 1. 将安装包上传至服务器 解压到当前文件夹 tar -zxvf mysql-8.0.34…

解决方法:从客户端(---<A href=“http://l...“)中检测到有潜在危险的 Request.Form 值。

从客户端(-----<A href"http://l...")中检测到有潜在危险的 Request.Form 值。 解决方法&#xff1a;应该是不同的.net Framework版本对代码的校验不同&#xff0c;造成在高版本操作系统&#xff08;即高.net Framework版本校验&#xff09;不兼容&#xff0c;可…

4 OpenCV实现多目三维重建(多张图片增量式生成稀疏点云)【附源码】

本文是基于 OpenCV4.80 进行的&#xff0c;关于环境的配置可能之后会单独说&#xff0c;先提一嘴 vcpkg 真好用 1 大致流程 从多张图片逐步生成稀疏点云&#xff0c;这个过程通常包括以下步骤&#xff1a; 初始重建&#xff1a; 初始两张图片的选择十分重要&#xff0c;这是整…

linux 安装操作 redis

1、redis概述和安装 1.1、安装redis 1. 下载redis 地址 https://download.redis.io/releases/ 2. 将 redis 安装包拷贝到 /opt/ 目录 3. 解压 tar -zvxf redis-6.2.1.tar.gz4. 安装gcc yum install gcc5. 进入目录 cd redis-6.2.16. 编译 make7. 执行 make install 进…

【Python生活脚本】视频转Gif动图

忘记过去&#xff0c;超越自己 ❤️ 博客主页 单片机菜鸟哥&#xff0c;一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-10-20 ❤️❤️ 本篇更新记录 2023-10-20 ❤️&#x1f389; 欢迎关注 &#x1f50e;点赞 &#x1f44d;收藏 ⭐️留言&#x1f4dd;&#x1f64…

RHEL 8.6 Kubespray 1.23.0 install kubernetes v1.27.5

文章目录 1. 预备条件2. download01 节点 安装 dockerdownload01 节点 介质下载下载 bastion01节点配置 yum 源bastion01 节点安装 docker5. 安装 docker insecure registrybastion01 部署 nginx 与 镜像入库13.1 配置 config.sh13.2 配置 setup-docker.sh13.3 配置 start-ngin…

多测师肖sir_高级金牌讲师___ui自动化之selenium001

一、认识selenium &#xff08;1&#xff09;selenium是什么&#xff1f; a、selenium是python中的一个第三方库 b、Selenium是一个应用于web应用程序的测试工具&#xff0c;支持多平台&#xff0c;多浏览器&#xff0c;多语言去实现ui自动化测试&#xff0c;我们现在讲的Sel…

正点原子嵌入式linux驱动开发——Linux中断

不管是单片机裸机实验还是Linux下的驱动实验&#xff0c;中断都是频繁使用的功能&#xff0c;在裸机中使用中断需要做一大堆的工作&#xff0c;比如配置寄存器&#xff0c;使能IRQ等等。但是Linux内核提供了完善的中断框架&#xff0c;只需要申请中断&#xff0c;然后注册中断处…

Linux CentOS 8(网卡的配置与管理)

Linux CentOS 8&#xff08;网卡的配置与管理&#xff09; 目录 一、项目介绍二、命令行三、配置文件四、图形画界面的网卡IP配置4.1 方法一4.2 方法二 一、项目介绍 Linux服务器的网络配置是Linux系统管理的底层建筑&#xff0c;没有网络配置&#xff0c;服务器之间就不能相互…

接口测试 —— jmeter与数据库的操作

在进行接口测试时&#xff0c;数据库查询是常用的一种判断方式&#xff0c;用来确定数据操作是否成功。除了这种场景&#xff0c;数据库里面的数据也是非常好的测试数据&#xff0c;比如作为请求的测试数据输入&#xff0c;那使用jmeter工具如何把数据库的数据依次获取作为参数…

Win10下基于VS2015编译SQLite3源码

一、下载SQLite SQLite SQLite Download Page 下载红框部分的3个文件 提示&#xff1a;这里有个 sglite-autoconf-3420000.tar.gz 是免编译版&#xff0c;想省事就下载这个&#xff0c;但我自己用这个老是编译不过 所以我这里不推荐这个了 二、配置SQLite 打开vs 2015或者其他…

如何处理前端路由懒加载?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

界面组件DevExpress WPF v23.1 - 全面升级文档处理功能

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

DETR原理与代码超详细解读

文章目录 前言一、DETR论文原理1、DETR整体介绍2、DETR论文贡献3、DETR模型框架4、DETR基于二分图匹配的LOSS 二、DETR环境安装1、安装基础环境2、pycocotools安装3、其它环境安装4、环境验证5、训练与推理效果显示 三、数据准备1、coco 数据格式2、修改数据 四、DETR加载数据代…

lnmp架构部署Discuz论坛并配置重定向转发

lnmp架构部署Discuz论坛并配置重定向转发 文章目录 lnmp架构部署Discuz论坛并配置重定向转发环境说明部署Discuz论坛系统下载Discuz论坛系统代码包&#xff0c;官网地址如下&#xff1a;部署Discuz论坛系统步骤&#xff1a;解压安装Discuz源码包配置虚拟主机进入Discuz安装界面…

ArcGIS笔记10_如何创建渔网?

本文目录 前言Step 1 确定渔网的精度单位Step 2 有底图时创建渔网的操作 前言 ArcGIS中的渔网是一个很好用的工具&#xff0c;它可以创建出规规整整的小格子&#xff0c;每个小格子都对应一个标注点&#xff0c;可以将原本散乱的数据规整化&#xff0c;如下图&#xff1a; Ste…

非平稳信号分析和处理、STFT的瞬时频率研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Monocle 3 | 太牛了!单细胞必学R包!~(一)(预处理与降维聚类)

1写在前面 忙碌的一周结束了&#xff0c;终于迎来周末了。&#x1fae0; 这周的手术真的是做到崩溃&#xff0c;2天的手术都过点了。&#x1fae0; 真的希望有时间静下来思考一下。&#x1fae0; 最近的教程可能会陆续写一下Monocle 3&#xff0c;炙手可热啊&#xff0c;欢迎大…

vue集成钉钉单点登录

初始环境判断 判断是否是来自钉钉环境的访问&#xff0c;返回&#xff1a;boolean类型值 window.navigator.userAgent.includes("DingTalk")前端引入vue中钉钉相关的依赖&#xff0c;并获取钉钉的临时授权码 import * as dingtalk from dingtalk-jsapi; let that …