微信小程序halfScreenDialog的实现

写毕设的时候要点击跳转到相应物品的详情，觉得很没新意，就想到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就懒得放了，就是读取数据库的数据。

 最后出来效果如下：