|
<view class="cont">
<!-- 顶部搜索模块 -->
<view class='head_sele_view'>
<input bindinput='select_name' type='text' class='select_name' placeholder='请输入要搜索的昵称' />
<view class='selec_btn' bindtap='btn_select'>搜索</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' bindtap='btn_add'>添加</label>
<label class='list_add'bindtap="btn_updata"data-index='{{index}}' >修改</label>
<label class='list_add' bindtap='btn_del' data-index='{{index}}'>删除</label>
</view>
</view>
<!-- -->
</view>
<!-- 引入弹窗组件 -->
<layter bind:myevent="myevent" id="layerID"></layter>
//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: app.globalData.list,
name: null
},
// 这里子组件传值修改当前要修改的值
myevent: function(obj) {
console.warn("获取到组件传递过来的参数===>", obj.detail.val);
if (obj.detail.val != null && obj.detail.val!=""){
// 获取选中的索引
var index = obj.detail.val.index;
// 更改选中的参数
app.globalData.list[index].list_title = obj.detail.val.name;
// 修改成功重新渲染
this.setData({
list: app.globalData.list
})
}
},
// 获取到输入昵称
select_name: function(res) {
this.setData({
name: res.detail.value
})
},
/**
* 搜索
*/
btn_select: function() {
console.error("搜索==>", this.data.name);
var newarray = [];
for (var i = 0; i < app.globalData.list.length; i++) {
var name = app.globalData.list[i].list_title.slice(0, 1);
console.warn(name);
if (this.data.name == name) {
newarray.push(app.globalData.list[i]);
this.setData({
list: newarray
})
}
}
},
// 删除指定元素
btn_del: function(res) {
var index = res.currentTarget.dataset.index;
var that = this;
wx.showModal({
title: '提示',
content: '确定删除吗？',
success: function(res) {
if (res.confirm) {
app.globalData.list.splice(index, 1);
console.log("list", app.globalData.list);
app.globalData.list = app.globalData.list;
that.setData({
list: app.globalData.list
})
}
}
})
},
// 添加数据
btn_add: function() {
// 模拟死数据
var name = {
list_name: "",
list_title: "你说呢",
list_img: ""
};
// 追加元素
app.globalData.list.push(name);
// 重新渲染数据列表
this.setData({
list: app.globalData.list
})
},
// 点击修改传递到组件并掉起弹窗组件
btn_updata: function(res) {
// 获取到当前选中索引
var index = res.currentTarget.dataset.index;
// 传递参数
var data = {
index: index,
modal: true
};
// 掉起弹窗组件
var layerID = this.selectComponent("#layerID");
layerID.openlayer(data);
}
})
//JSON
{
"navigationBarTitleText":"首页",
"usingComponents": {
"layter":"../layter/layter"
}
}
//组件WXML
<view class="content" hidden="{{!modal}}">
<!-- 遮罩视图容器 -->
<mask class='mask' bind:tap="btn_close" />
<!-- 弹窗组件 -->
<view class='layer'>
<!-- 弹板 -->
<view class='list'>
<input type='text' placeholder='请输入文本！' bindinput='bindinput' placeholder-style='color:#fff;' class='layter-title'></input>
<view class='layer-button'>
<label class='layer-btn' bindtap='btn_close'>取消</label>
<label class='layer-btn' bindtap='btn_submit'>确定</label>
</view>
</view>
</view>
</view>
//组件JS
/**
* > 组件名:layter
* > 调用方式第一步:JSON引入"layter":"../components/layter/layter"
* > 调用方式第二步:页面引入<layter></layter>
* > 开发者:老五
* > 编辑时间:2018.1.29
*/
const app = new getApp();
Component({
properties: {},
data: {
modal: false,
name: null,
index:null
},
lifetimes: {
attached() {},
ready() {},
detached() {},
},
methods: {
// 关闭弹窗
btn_close: function() {
this.setData({
modal: false
})
},
// 输入
bindinput: function(res) {
this.setData({
name: res.detail.value
})
},
// 确定
btn_submit: function() {
if (this.data.name != null) {
var val ={
index:this.data.index,
name:this.data.name
};
var myEventDetail = {
val: val
} // detail对象，提供给事件监听函数
this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用
this.setData({
modal: false
})
}else{
wx.showToast({
title: '请输入',
icon:"none",
duration:2000
})
}
},
openlayer:function(res){
this.setData({
modal: res.modal,
index: res.index
})
}
}
})
//组件WXSS
@import "../anmiate.wxss";
.content {
width: 100%;
height: 100%;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
top: 0;
left: 0;
z-index: 9;
opacity: 0.8;
}
.layer {
position: fixed;
z-index: 999;
width: 100%;
text-align: center;
top: 20%;
}
.list {
animation: rotate-btn-close linear 0.3s infinite;
position: relative;
display: inline-block;
width: 80%;
height: 300rpx;
background-color: #fff;
}
.layter-title {
position: relative;
top: 15%;
width: 80%;
text-align: left;
padding-left: 30rpx;
font-size: 30rpx;
height: 80rpx;
display: inline-block;
color: #fff;
line-height: 80rpx;
border: 1rpx solid #f5f5f5;
background-color: #999;
border-radius: 10rpx;
}
.layer-button {
position: absolute;
width: 100%;
bottom: 0rpx;
height: 130rpx;
border-top: 1rpx solid #ccc;
line-height: 130rpx;
}
.layer-btn {
background-color: #333;
color: #fff;
width: 200rpx;
height: 80rpx;
text-align: center;
font-size: 30rpx;
border-radius: 10rpx;
padding: 15rpx 30rpx;
margin: 10rpx 50rpx;
line-height: 80rpx;
}
//组件JSON
{
"navigationBarTitleText": "弹窗组件",
"component": true
}
|
客服电话
APP下载
官方微信
请发表评论