效果图
wxml
给需要点击的view增加事件
bindtap="goAlert"
<!-- 弹框 --> <view class='bg' wx:if="{{alert==1}}"> <view class='bg-alert'> <view wx:for="{{alertLlist}}" data-index='{{index}}' class="{{selected==index?'show-alert':'hidden-alert'}}" bindtap='selected'>{{item}}</view> </view> </view>wxss
/*弹窗 */.bg{ width: 100%; height: 100%; position: fixed; top: 0rpx; left: 0rpx; background: rgba(0, 0, 0, 0.6)}.bg-alert{ width:560rpx; height: 320rpx; background-color: #fff; border-radius: 20rpx; margin: 320rpx auto;}.gb-txt{ height: 106rpx; border-bottom: 2rpx solid #d2d3d5; text-align: center; line-height: 106rpx;}.show-alert{ color: #14a1fd; height: 106rpx; border-bottom: 2rpx solid #d2d3d5; text-align: center; line-height: 106rpx;}.hidden-alert{ color: #999; height: 106rpx; border-bottom: 2rpx solid #d2d3d5; text-align: center; line-height: 106rpx;}js
Page({/*** 页面的初始数据*/data: {alert: 0,alertLlist: ['选项A', '选项B','选项C'],selected: 0,index:0}, selected: function (e) { // console.log(e) let that = this let index = e.currentTarget.dataset.index // console.log(index) if (index == 0) { that.setData({ selected: 0, alert: 0 }) } else if (index == 1) { that.setData({ selected: 1, alert: 0 }) } else{ that.setData({ selected: 2, alert: 0 }) } }, goAlert :function (){ let that = this that.setData({ alert:1 }) },
