微信小程序 解決左右滑動文字不橫排 和 點擊改變顏色 和超出文本自動換行

*

微信小程序 解決左右滑動文字不橫排

wxml文件

<view class='conterner' >
	<scroll-view scroll-x="true" style="width: 100%; white-space: nowrap;">
		<block wx:for="{{children}}" wx:key>
			<view class='listw1' data-index="{{index}}" catchtap="onClicktext" >
             <!-- 改變顏色 -->
				<view class="{{index == view ? 'view1' : 'view2'}}">{{item.cate_name}}</view>
			</view>
		</block>
	</scroll-view>
</view>

wxss文件

.conterner{
  margin-top: 110rpx;
  margin-left: 170rpx;
}
.listw1{
  display: inline-block;
  padding-top:20rpx;
  margin-left: 30rpx;
}
.view2{
  font-size: 30rpx;
  color: black;
}
.view1{
  font-size: 30rpx;
  color: red;
}

js文件 點擊改變顏色

 onClicktext:function(e){
   var index = e.currentTarget.dataset.index
   var view = this.data.view
   this.setData({
     view:index
   })
  },

超出文本自動換行

.productText{
 margin-top: 40rpx;
 //給文本一個寬度
 width: 390;
 white-space: normal;
 overflow: hidden;
 text-overflow: ellipsis;
}