写毕设的时候要点击跳转到相应物品的详情,觉得很没新意,就想到KFC手机点餐页面那个点击之后出来一个类似弹窗的页面,想着用这个。是weui提供的,代码写得有点乱,很多样式直接写到wxml文件里了。
wxml代码:
<mp-halfScreenDialog bindbuttontap="buttontap" show="{{show}}" maskClosable="{{false}}" > <view slot="title"> <text>物品详情</text> </view> <view slot="desc" style="width: 100%; height: 100%; display: flex; flex-direction: column;"> <view style="display: flex;"> <view> <image class="avatar" src="{{selectedItem.avatar}}" /> </view> <view style="display: flex;flex-direction: column;justify-content: space-around; margin-left: 5px;"> <view style="font-size: 14pt;font-weight: bold;">{{ selectedItem.name }}</view> <view style="color: darkgray; margin-top: -3px;">{{selectedItem.sendTime}} </view> </view> </view> <view style="font-size: 50rpx; height: 300px; width: 300px; margin-top:10rpx; overflow: hidden;"> <image src="{{selectedItem.image[0]}}" mode="widthFix" style="width:300px; height: 300px;"/> </view> <text style="font-size: 22px; display: block; height: 8%; align-items: center; justify-content: center; font-weight: bold; margin-top: 5px;">{{selectedItem.goodsTitle}}</text> <text style="font-size: 18px; display: block; height: 8%; color:crimson; margin-top: 3px;">¥{{selectedItem.newPrice}}</text> <text style="font-size: 16px; display: block; height: 30%; overflow: scroll; color: darkgray; margin-top: 3px;"> <text style="font-size: 16px; color: black; font-weight: bold;">详细信息:</text> {{selectedItem.goodsDetails}}</text> </view> <view slot="footer" style="display: flex; width: 100%; height: 100%;"> <image class="icon" src="/images/tohome.png" bindtap="gotoHome" mode="widthFix" style="margin-right: 25px;"></image> <image class="icon" src="{{ selectedItem.collected ? '/images/addto_selected.png':'/images/addto.png'}}" bindtap="addtoCollection" mode="widthFix" style="margin-right: 25px;"></image> <button bindtap="contact" style="justify-content: center; text-align:center; align-items:center;margin: 0;">获取联系方式</button> </view> </mp-halfScreenDialog>
wxss里加了这几个:
.weui-half-screen-dialog { max-height: 100% !important; top:4%; } .weui-half-screen-dialog__hd{ height: 6em; } .weui-half-screen-dialog__ft{ padding: 0; } .icon{ width: 50px; height: 50px; } .avatar{ width: 50px; height: 50px; border-radius: 50%; }
js就懒得放了,就是读取数据库的数据。
最后出来效果如下: