DDR爱好者之家 Design By 杰米
图示:
wxml代码:
<view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> <view class='active' bindtap="showDialogBtn">立即报名</view> </view> <!--模态框--> <!-- 遮罩层 --> <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> <view class="modal-dialog" wx:if="{{showModal}}"> <view class="modal-title">选择班次</view> <view class="modal-content"> <view class="concent_list {{curindex==index" wx:for="{{concent_list}}" wx:for-index='index' data-index='{{index}}' bindtap='choose' data-name='{{item}}'>{{item}}</view> </view> <view class="modal-footer"> <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view> <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view> </view> </view>
wxss代码
.fix_bottom{ width: 100%; height: 120rpx; background: #fff; position: fixed; bottom: 0; border-top: 1px solid #ccc; display: flex; } .fix_bottom view{ width: 33.333%; border-left: 1px solid #ccc; line-height: 120rpx; text-align: center; font-size: 40rpx; font-weight: bold; } .active{ color:#ffffff; background: -moz-linear-gradient(left, #ff7b68, #ff5462); /* Safari 4-5, Chrome 1-9 */ /* -webkit-gradient(, [, ]"htmlcode">var value='小学升初中' Page({ /** * 页面的初始数据 */ data: { showModal: false, concent_list:['小学升初中','初一升初二','初二升初三','初中升高中'], curindex:-1 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 弹窗 */ showDialogBtn: function () { this.setData({ showModal: true }) }, /** * 隐藏模态对话框 */ hideModal: function () { this.setData({ showModal: false }); }, /** * 对话框取消按钮点击事件 */ onCancel: function () { this.hideModal(); }, /** * 对话框确认按钮点击事件 */ onConfirm: function () { this.hideModal(); }) }, choose:function(e){ var index=e.currentTarget.dataset.index value = e.currentTarget.dataset.name console.log(value) this.setData({ curindex:index }) } })模态框显示时禁止底部内容滚动可以在弹出时给底部包裹部分加上固定定位,模态框隐藏时取消固定定位
内容包裹的元素需要设置100%的宽度
<view class='diceng_wrap' style='position: {{position}}'> 底部所有内容内容内容 </view>data数据的变化:
初始化时:
position: 'auto',
模态框显示时:
position: 'fixed',
模态框隐藏时:
position: 'auto',
模态框显示时
总结
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月24日
2024年04月24日
- MedwynGoodall经典巨作《女巫医7遗失的旋律》[WAV]
- 博主分享部分游戏特色开始界面:你心中的前4名是?
- “3Q大战”14年后 周鸿祎、马化腾罕见握手:相逢一笑
- 《完蛋》浩浩妈演员COS怀孕美杜莎 一口一个萧炎哥哥
- 张靓颖《倾听》[WAV分轨 24bit/96khz][2.2G]
- 林志炫《一个人的样子》[WAV分轨][494M]
- 马良《往后余生》[WAV+CUE][392M]
- 万芳.2020-给你们Dear.All【何乐音乐】【WAV+CUE】
- 左小祖咒.2023-我爱南京【FLAC分轨】
- 伦永亮.2006-伦流转2CD【正东】【WAV+CUE】
- 物华弥新山水人物镜厉害吗 山水人物镜培养建议分享
- 物华弥新战国铜餐具厉害吗 战国铜餐具培养建议分享
- 物华弥新七盘舞砖厉害吗 七盘舞砖培养建议分享
- UCGG-9538MAURIZIOPOLLINI-CHOPIN24ETUDESSACD
- 雨果唱片-《中国管弦乐及小品系列-红旗颂》(APE+CUE)