1、下载滑动插件，引入
2、使用方法
/* 引用 */ import tSlide from "@/components/t-slide/t-slide.vue" components:{tSlide} /* 使用 */ <template> <view class="t-wrap" > <t-slide ref="slide" @edit="edit" @del="del" @itemClick="itemClick"> // 内容区域 自定义样式 <template v-slot:default="{item}"> <view> {{item.content}} </view> </template> </t-slide> </view> </template>
在onLoad中赋值
this.$nextTick(()=>{ this.$refs.slide.assignment(this.dataList) //this.dataList 你的数据数组 })
methods: { //点击单行 itemClick(data){ console.log('点击',data) }, //删除 del(data){ console.log('删除',data) uni.showToast({ title:'删除ID--'+data.id, icon:'none' }) }, //编辑 edit(data){ console.log('编辑',data) uni.showToast({ title:'编辑ID--'+data.id, icon:'none' }) }, }
新建一个页面用来存放vuex中的list数组
page.js
目录结构如下：
index.js
替换原有的数据
效果如下：
渲染数据
接下来就是渲染对应的地址数据
page.js export default { state:{ List: [{ name: '张珊珊', phone:'18989897878', email:'1159006386@qq.com', province: '安徽省', city:"合肥市", district:"龙泉路七里塘街道", // 街道 address: '金厦小区', //详细地址 default:0 }, ] }, mutations:{ addAddress(state,preload){ state.List.unshift(preload) } } }
把格式替换成address.vue页面中的数据格式
在page.js中写一个载荷用来添加列表地址
在点击保存后触发载荷添加form中的数据
import {mapMutations} from 'vuex' methods: { ...mapMutations(['addAddress']), submit(){ this.addAddress(this.form) uni.navigateBack({ delta:1, }); } }
address.vue页面效果图
点击保存后
detail.vue页面 效果图
接下来就是对表单进行验证
正则表单式验证input表单中的，姓名，电话，邮编，以及详细地址
下面是正则表单式验证方式
address.vue页面
rules: { name: [{ rule: /^.{2,12}$/, msg: "用户名必须是2-12为字符" }], phone: [{ rule: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, msg: "请输入11位的正确的手机号码" }], email: [{ rule:/^[0-9]{6}$/, msg: "中国邮政编码为6位数字" }], address: [{ rule: /^.{2,50}$/, msg: "地址最低不少于2个字" }] },
定义一个方法validate
validate(key) { var check = true; this.rules[key].forEach(v => { if (!v.rule.test(this.form[key])) { uni.showToast({ title: v.msg, // 勾号消失 icon: 'none' }) return check = false } }) return check },
在保存时验证信息是否正确
submit(){ this.addAddress(this.form) if (!this.validate('name')) return; if (!this.validate('phone')) return; if (!this.validate('email')) return; if (!this.validate('address')) return; uni.navigateBack({ delta:1, }); },
编辑（核心）
插件t-slide.vue页面需要获得index索引值
给address.vue设置一个控制字符
isEdit: false, index: -1,
address.vue
onLoad(e) { if(e.data){ let result = JSON.parse(e.data) this.form = result.item this.index = result.index console.log(this.index); this.isEdit = true } },
保存按钮事件
if (!this.validate('name')) return; if (!this.validate('phone')) return; if (!this.validate('email')) return; if (!this.validate('address')) return; if (this.isEdit) { this.updatePath({ index: this.index, item: this.form, }) uni.showToast({ title: '修改成功' }); uni.navigateBack({ delta: 1, }); return; } else { this.addAddress(this.form) uni.navigateBack({ delta: 1, }); }
记得引入updatePath
...mapMutations(['addAddress', 'updatePath']),
page.js
// 修改 updatePath(state,{index,item}){ for (let key in item) { console.log(key); state.List[index][key] = item[key] }
