js代码
const app = getApp ()
wx.cloud.init({
env: 'cloud1-0gouyszi7da729' //
})
const db = wx.cloud.database({
env: 'cloud1-0gouyszi7da729' //
})
Page({
onLoad(){
db.collection('fenlei').where({}).get({
success:res=>{
var that=this
that.setData({huancunlist : res.data})
}
})
},
data:{
fenleiliebiaO:'',
huancunlist:[],
},
fenleiInput: function (e) {
this.setData({
fenleiliebiaO:e.detail.value
})
},
jiarufenleiInput:function(){
var that = this
db.collection('fenlei').where({fenleilist:that.data.fenleiliebiaO}).get({
success(res){
if (that.data.fenleiliebiaO.length==0){
wx.showModal({
title:'温馨提示:',
content:'插入内容不能为空',
showCancel:false
})
}
else if(res.data[0] == null && that.data.fenleiliebiaO!=0 ){
db.collection('fenlei').add({
data:{
fenleilist : that.data.fenleiliebiaO,
}
})
setTimeout(()=>
{db.collection('fenlei').where({}).get({
success:res=>{
that.setData({huancunlist : res.data})
}
})},5000)
wx.showModal({
title: '温馨提示:',
content:'已成功加入新类目',
showCancel:false})
}
else if (that.data.fenleiliebiaO == res.data[0].fenleilist){
{ wx.showModal({ //写入失败提示框
title: '温馨提示:',
content:'该条目已存在',
showCancel:false})}
}
}})
},
shanchuleimu:function(e){
var index = e.currentTarget.dataset.index;
console.log("index: "+index)
var db=wx.cloud.database( {
env: 'cloud1-0gouyszi9'
})
db.collection("fenlei").where({fenleilist:this.data.huancunlist[index].fenleilist}).remove()
wx.showModal({
title: '温馨提示:',
content:'已成功删除该条目',
showCancel:false
})
setTimeout(()=>
{ db.collection('fenlei').where({}).get({
success:res=>{
var that=this
this.setData({huancunlist : res.data})
console.log(this.data.huancunlist)
}
},5000)
})
}
})
wxml代码
<view class='fenlei_item'>
<input class='input' bindinput='fenleiInput' name="fenlei" placeholder='请输入新的分类' />
</view>
<button class='jiarufenleiInput' bindgetuserinfo="onGetuserinfo" form-type='jiaruleimu' bindtap="jiarufenleiInput" style="position: relative; left: 237rpx; top: -71rpx">
插入分类
</button>
<view class='card'>
<scroll-view class='scroll-card1'>
<view class="card1" wx:for="{{huancunlist}}" wx:for-index="index" wx:key="index" wx:-item="item">
<button class='tiaomu' size="mini" data-index="{{index}}">
{index +1}}-->{{item.fenleilist}}
</button>
</view>
</scroll-view>
<scroll-view class='scroll-card2'>
<view class="card2" wx:for="{{huancunlist}}" wx:for-index="index" wx:key="index" wx:-item="item">
<button class='tiaomu' bindtap="shanchuleimu" size="mini" data-index="{{index}}">
{index +1}}-->删除类目
</button>
</view>
</scroll-view>
</view>
wxss代码
.page{
height: 100vh;
width: 100vw;
}
.fenlei_item{
height: 5vh;
}
.input{
border-radius: 5px;
width: 60vw;
height: 5vh;
}
.jiarufenleiInput{
height: 5vh;
width: 38vw;
}
.card{
display: flex;
width: 100%;
height: 85vh;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.scroll-card1{
display: flex;
width: 38vw;
height: 85vh;
}
.scroll-card2{
display: flex;
width: 38vw;
height: 85vh;
}
.card1{
display: flex;
top: 5vh;
height: 5vh;
width: 38vw;
}
.card2{
display: flex;
top: 5vh;
height: 5vh;
width: 38vw;
}
.tiaomu{
height: 5vh;
}
目前只关心功能,和为什么苹果安卓运行效果不同。
这是安卓机的效果
这是苹果的效果。