Page layout, absolute positioning and button code in the mini program-Mini Program Development-php.cn

Page layout, absolute positioning and button code in the mini program

不言

Release： 2018-08-10 16:43:11

Original

4037 people have browsed it

The content this article brings to you is about the page layout, absolute positioning and button code in the mini program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

  <view class="dibu">
  <input  value=&#39;{{inputVal}}&#39; bindinput=&#39;inputTyping&#39; class="wz" bindinput=&#39;inputTyping&#39; placeholder="请输入私信内容" placeholder-style=&#39;color:#bdbdbd;line-height:68rpx;margin-left:30rpx;font-size:30rpx;&#39; />
  <view bindtap="blurfocus" class="fasong">发送</view>
  </view>

.dibu{
position:fixed;
bottom:2px;
float:left;
border:2px solid #f5f5f5;
width:99%;
height:70rpx;
background:white;
}

.wz{
    /* border:1px solid red; */
height:68rpx;
font-size:46rpx;
width:630rpx;
float:left;
border:1px solid #8EE5EE;
border-radius:10rpx;
}
.fasong{
    float:right;
height:70rpx;
margin-right:7rpx;
width:90rpx;
line-height:66rpx;
text-align:center;
border-radius:10rpx;
font-size:28rpx;
background:#8EE5EE;

}

Copy after login

Share must use button, but you need to customize the button (style="border:0;" plain="true" open-type="share")

<view class="viewh" wx:if="{{sharpicture==4}}">
    <view class="tp"><image class="tpimg" src="../../static/images/yqxg.png"/></view>
    <view class="imgtxt">你粗糙纹理好过<text style="font-size:60rpx;">{{facedata.defaultdata.wenli}}%</text>的人
    </view>
    <button class="share" style="border:0;" plain="true"  open-type="share">
   <image  src="../../static/images/share.png"/></button>
</view>

Copy after login

Sharing must bring good parameters, otherwise it will be blank or the page will not exist if others don’t see it

 onShareAppMessage: function (ops) {
        console.log(&#39;分享了&#39;);

        if (ops.from === &#39;button&#39;) {
            // 来自页面内转发按钮
            console.log(ops.target)
        }
        return {
            title: &#39;哈哈哈&#39;,
            path: &#39;/pages/facialEvaluate/facialEvaluate?faceFourdataId=&#39; + this.data.faceFourdataId +&#39;&userId=&#39;+this.data.userId,
           //path:&#39;&#39;,
            success: function (res) {
                // 转发成功
                console.log("转发成功:" + JSON.stringify(res));
            },
            fail: function (res) {
                // 转发失败
                console.log("转发失败:" + JSON.stringify(res));
            }
        }

    },

Copy after login

Related recommendations:

How to get music links in WeChat applet (pictures and texts) )

Summary of methods to return to the previous page with parameters in WeChat applet (three types)

The above is the detailed content of Page layout, absolute positioning and button code in the mini program. For more information, please follow other related articles on the PHP Chinese website!