微信小程序> 用view实现小程序自定义按钮样式

用view实现小程序自定义按钮样式

浏览量:1463 时间: 来源:AnonymousColt

wxml代码:

<view class="delete" data-index="{{index}}" bindtap="deleteItem">删除</view>

wxss代码:

.delete{  width: 70px;  height: 45rpx;  font-size: 12px;  border-width: 1rpx 1rpx 1rpx 1rpx;  border-color: #797979;  border-style: solid;  background-color: #ffffff;  color: #797979;  border-radius: 98rpx;  display: flex;  flex-direction: row;  align-items: center;  justify-content: center;}

js代码:

deleteItem: function (e) {    var that = this;    wx.showModal({      title: '提示',      content: '确定要删除吗?',      success: function (sm) {        if (sm.confirm) {          // 用户点击了确定 可以调用删除方法了          console.log('用户点击确定')          let id = that.data.bookReviewList[e.currentTarget.dataset.index].book_id          console.log(id)          that.data.bookReviewList.splice(e.currentTarget.dataset.index, 1)          that.setData({            bookReviewList: that.data.bookReviewList,            scrollLeft: 0,          })          wx.request({            url: '这里写地址',            data: {            },            header: {              'content-type': 'application/x-www-form-urlencoded',              'Accept': 'application/json'            },            method: 'DELETE',            success: function (res) {              console.log(res.data)            }          })        } else if (sm.cancel) {          console.log('用户点击取消')        }      }    })  },

实现效果:

 

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎