• <menu id="imq0s"><strong id="imq0s"></strong></menu>
  • 福州網站建設>網站新聞>福州微信小程序

    微信小程序open-data userAvatarUrl圓角顯示

    發布日期:2019-10-02瀏覽次數:556 來源:福州網站建設

    微信小程序獲取用戶頭像有兩種方式:


    一種是通過調用wx.getUserInfo方法,從userInfo字段中解析出avatarUrl。


    另一種是通過open-data組件,直接將用戶頭像顯示在頁面指定位置。



    針對第二種方法,無法使用border-radius:50%來設置頭像圓角,需要使用clip-path: circle(50rpx at center);進行四周的剪裁,具體代碼示例如下:



     
    .avatar{
      width: 100rpx;
      height: 100rpx;
      clip-path: circle(50rpx at center);
    }
     


    注:


    1. open-data組件依賴的小程序基礎庫版本號最低為1.9.90


    2. clip-path CSS 屬性可以對元素的部分區域進行裁剪(隱藏)。


     


     


     


    --------------------------------------------------------------------------------------------------


    5.8修改


    針對屬性border-radius:50%,實際也可以奏效,需要配合overflow:hidden來使用,完整代碼:



     
    .avatar{
      width: 100rpx;
      height: 100rpx;
      overflow:hidden;  
      border-radius: 50%; 
    }
     

    以上是由福州網站建設的小編為你分享了"微信小程序open-data userAvatarUrl圓角顯示"文章,如果你在這方面有什么問題,隨時聯系我們

    福州微信小程序有關的文章
    如果您有什么問題,歡迎咨詢我們客服! 點擊QQ咨詢
    色妞网AV天堂,特级毛片高清特级毛片,免费欧洲毛片A级喷水视频软件
  • <menu id="imq0s"><strong id="imq0s"></strong></menu>