微信小程序之text超出省略号、圆形头像

微信小程序笔记

• text标签实现超出显示省略号
• 实现圆形头像

可以看到以下我们想要实现的效果

这是本人近期在做的一个购物平台的基本框架,应该也是大部分做购物平台小程序比较普遍的页面布局。
（商品的图片是从一个图片接口获取的，需要的可以参考：图片接口链接）
小程序的wxml如下：

<scroll-view class="scroll_contain" scroll-y >
      <block wx:for="{{goods}}" wx:key="goods">
        <view class="item">
            <view class="img_name_price_add" bind:tap="toDetail" hover-class="im">
                <image class="goods_img" src="{{item.img}}" mode="aspectFill"/>
                <view class="name_price_add">
	              <!--商品名-->
                  <text class="name_text">{{item.goods_name}}</text> 
                  <!--价格-->
                  <text class="price_text">￥{{item.price}}</text>
                 <!--地址-->
                  <text class="add_text">{{item.address}}</text>
                </view>
            </view>
            <view class="about_buss" >
              <view class="head_contain">
              <!--头像-->
                <image class="head_img" src="/static/testimg/head.jpg" mode="aspectFill"/>
              </view>
              <!--商家-->
              <text class="buss_name">{{item.business}}</text>
              
            </view>       
        </view>
      </block>
  </scroll-view>  

主要是通过更改wxss来对文字的style进行控制
具体wxss如下：

.scroll_contain{
  position:relative;
  border-radius: 10rpx;
  width: 100%;
  height: 100%;
  margin-bottom: 150rpx;
 
}

.scroll_contain .item{
  position: relative;
  border-radius: 10rpx;
  border: 2rpx wheat solid;
  margin : 5rpx;
  width: 45%;
  height: 550rpx;
  padding: 0;
  margin-top: 20rpx;
  margin-left: 20rpx;
  float: left;
}



.img_name_price_add {
    height: 480rpx;
}

.goods_img{
  width: 100%;
  height: 350rpx;
  border-radius: 10rpx;
}  

.name_price_add{
  width: 100%;
  height: calc(550rpx * 6/ 8 -300rpx );
}


.img_name_price_add .name_text{
  display: block;
  font-size: 38rpx;
  margin-left: 20rpx;
  width: 100%;
  height: 40rpx;
  font-family: "KaiTi", "SimKai", "KaiTi_GB2312", "KaiTi_GB2312", sans-serif; 
  overflow: hidden;/*超出文本隐藏*/
  white-space: nowrap;/*不换行只显示一行*/
  text-overflow:ellipsis; /*超出部分省略号显示 */
}


.img_name_price_add .price_text{

  position: relative;
  top: 38rpx;
  font-size: 35rpx;
  font-family: "KaiTi", "SimKai", "KaiTi_GB2312", "KaiTi_GB2312", sans-serif; 
  margin-left: 10rpx;

  color: #F3561E;
}
.img_name_price_add .add_text{
  display: block;
  margin-left: 200rpx;
  font-family: "KaiTi", "SimKai", "KaiTi_GB2312", "KaiTi_GB2312", sans-serif; 
  color:#aaa;
  overflow: hidden;/*超出文本隐藏*/
  white-space: nowrap;/*不换行只显示一行*/
  text-overflow:ellipsis; /*超出部分省略号显示 */
}

.about_buss{
  position: relative;
  padding-top: 15rpx;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  border-top: 1rpx solid #ccc;
}



.buss_name{
  font-size: 35rpx;
  font-family: "KaiTi", "SimKai", "KaiTi_GB2312", "KaiTi_GB2312", sans-serif; 
  align-self: start;
}

/*圆形头像*/
/*主要是靠view将图片包裹。而将view中的组件超出部分设置隐藏(hidden)来实现*/
.head_contain{
  width: 45rpx;
  height: 45rpx;
  border-radius: 22.5rpx;
  background-color: whitesmoke;
  overflow: hidden;
}

.head_img{
  width: 45rpx;
  height: 45rpx;
}