版权声明:菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/86688434
//WXML
<view class="cont">
<!-- 顶部搜索模块 -->
<view class='head_sele_view'>
<input type='text' class='select_name' placeholder='请输入要搜索的昵称' />
<view class='selec_btn'>搜索</view>
</view>
<!-- 默认显示列表数据 -->
<view class='list' wx:for="{{list}}" wx:key="key">
<label class='list_title'>{{item.list_title}}</label>
<view class='list_base_list'>
<label class='list_add'>添加</label>
<label class='list_add'>修改</label>
<label class='list_add'>删除</label>
</view>
</view>
<!-- -->
</view>
//WXSS
/**index.wxss**/
.cont {
width: 100%;
height: 100vh;
background-color: #f5f5f5;
}
/* 顶部搜索模块 */
.head_sele_view {
position: relative;
width: 100%;
height: 100rpx;
line-height: 100rpx;
background-color: tomato;
}
.select_name {
width: 70%;
position: absolute;
left: 30rpx;
font-size: 30rpx;
padding-left: 30rpx;
height: 80rpx;
top: 10%;
background-color: #fff;
}
.selec_btn {
position: absolute;
right: 30rpx;
width: 125rpx;
top: 10%;
text-align: center;
font-size: 30rpx;
padding: 10rpx 0rpx;
display: inline-block;
background-color: #fff;
height: 63rpx;
line-height: 63rpx;
}
/* 列表数据 */
.list {
position: relative;
top: 20rpx;
width: 100%;
height: 100rpx;
line-height: 100rpx;
margin-bottom: 15rpx;
font-size: 30rpx;
background-color: #fff;
}
/* 标题 */
.list_title {
position: absolute;
width: 500rpx;
height: 100rpx;
left: 30rpx;
}
/* 功能视图 */
.list_base_list {
position: absolute;
width: 273rpx;
height: 100rpx;
padding: 0rpx 10rpx;
line-height: 100rpx;
float: left;
right: 0rpx;
}
/* 添加 */
.list_add {
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
padding: 10rpx 10rpx;
margin: 5rpx 10rpx;
font-size: 28rpx;
background-color: #333;
color: #fff;
text-align: center;
}
//JS
const app = new getApp();
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
list_name: "",
list_title: "你说这是什么,我不太明白",
list_img: ""
}, {
list_name: "",
list_title: "你说这是什么,我不太明白",
list_img: ""
}, {
list_name: "",
list_title: "你说这是什么,我不太明白",
list_img: ""
}, {
list_name: "",
list_title: "你说这是什么,我不太明白",
list_img: ""
}, {
list_name: "",
list_title: "你说这是什么,我不太明白",
list_img: ""
}, {
list_name: "",
list_title: "你说这是什么,我不太明白",
list_img: ""
}, ]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})