WX小程序案例（一）：弹幕列表

WXML内容

<!--pages/formCase/formCase.wxml-->
<!-- <text>pages/formCase/formCase.wxml</text> -->
<view class="bk bkimg"><!-- <image src="/static/imgs/ceeb653ely1g9na2k0k6ug206o06oaa8.gif" mode="scaleToFill" class="bk"/> --><view class="out"><view class="title">弹幕列表</view><block wx:if="{{danmus.length}}"><view class="list"><view class="row" wx:for="{{danmus}}" wx:key="id"><view class="text">{{index+1}}. {{item.title}}</view><view class="close" bindtap="clickClear" data-index="{{index}}"><icon type="clear" /></view></view></view><view class="count">已装填 {{danmus.length}} 条弹幕</view></block><view wx:else class="count">🈚🈚🈚🈚🈚🈚</view><view class="comment"><!-- 双向绑定，改任意一个另一个也会变 --><input type="text" placeholder="发个友善的弹幕见证当下。。。" placeholder-style="color: #aaa; font-size: 28rpx;" model:value="{{inputValue}}" bindconfirm="onSend"/><button size="mini" type="primary" disabled="{{!inputValue.length}}" style="color: {{inputValue.length?white:black}};" bindtap="onSend">发送</button></view></view></view><!-- <view>{{inputValue}}</view> -->

WXSS内容

/* pages/formCase/formCase.wxss */
/* .bk{width: 750rpx;height: 100vh;background-color: rgba(63, 63, 63, 0.5);position: fixed;top: 0;left: 0;
} */.bk{display: block;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: gray;  /* z-index: -1; 将背景置于其他元素之下 */
}.title{font-size: 50rpx;text-align: center;color: black;/* 上右下左 */padding: 30rpx 0rpx 30rpx 0rpx;  background-color: #ffffff;
}
.out{width: 690rpx;/* margin: 30rpx; */margin-top: 30rpx;margin-left: auto;margin-right: auto;box-shadow: 0rpx 15rpx 40rpx rgba(0, 0, 0, 0.2);border-radius: 20rpx;padding: 30rpx;box-sizing: border-box;background-color: #ffffff;
}.out .list .row{padding: 15rpx 0;border-bottom: 1rpx solid #eeeeee;display: flex;justify-content: space-between;align-items: center;font-size: 34rpx;color: black;
}
.out .list .row .text{padding-right: 10rpx ;box-sizing: border-box;
}
.out .count{padding: 20rpx 0;margin-top: 10rpx;font-size: 30rpx;color: #333333;text-align: center;
}
.out .comment{display: flex;margin-top: 15rpx;
}
.out .comment input{flex: 4;background-color: rgb(231, 231, 231);margin-right: 10rpx;height: 64rpx;border-radius: 10rpx;padding: 0 20rpx;color: #333333;
}
.out .comment button{flex: 0.8;/* background-color: #20bcf5; *//* color: #aaaaaa; */font-size: 30rpx;font-weight: 100;
}

js内容

// pages/formCase/formCase.js
Page({/*** 页面的初始数据*/data: {bool: "false",inputValue: "",danmus: [{id: 1232,title: "test........"},{id: 1342,title: "下班！！！！！！！！！"},{id: 1342,title: "啊？？？？？？？？？？？？"},{id: 8943,title: "喔哦~~~~~~~"}]},onSend(e) {let value = this.data.inputValuelet arr = this.data.danmus// addarr.push({id: e.timeStamp,title: value})this.setData({danmus: arr,inputValue: ""})wx.showToast({title: '发送成功',icon: 'success',duration: 1000})},
// 注意这里有异步的问题，后面再回来解决，现在就这么写clickClear(e) {wx.showModal({title: '提示',content: '删除此条弹幕？',success:res=> {if (res.confirm) {let arr = this.data.danmuslet i = e.currentTarget.dataset.indexarr.splice(i, 1)this.setData({danmus: arr})}}})console.log(e);},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})