微信小程序项目_秋泊优选66

未闻花名酱

于 2020-09-23 22:25:51 发布

阅读量156

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/cpcpn/article/details/108762795

版权

61、商品搜索_页面功能实现

pages\search\index.json

{
  "usingComponents": {},
  "navigationBarTitleText": "商品搜索"
}

在这里插入图片描述
添加商品搜索页面的编译模式

pages\search\index.wxml

<view class="search_row">
    <input placeholder="请输入您要搜索的商品"></input>
    <button>取消</button>
</view>

<view class="search_content">
    <view class="search_item">
    1测试商品数据，测试商品数据，测试商品数据，测试商品数据，测试商品数据，测试商品数据
    </view>

    <view class="search_item">
    2测试商品数据，测试商品数据，测试商品数据，测试商品数据，测试商品数据，测试商品数据
    </view>

    <view class="search_item">
    3测试商品数据，测试商品数据，测试商品数据，测试商品数据，测试商品数据，测试商品数据
    </view>
</view>

pages\search\index.less

page{
    background-color:#dedede;
    padding: 20rpx;
}
.search_row{
    height: 60rpx;
    /*父；伸缩盒子*/
    display: flex;
    input{
        background-color: #fff;
        /*子类：占一份*/
        flex:1;
        height: 100%;
        padding-left: 30rpx;
    }
    button{
        width: 110rpx;
        height:100%;
        padding: 0;
        margin: 0 10rpx;
        /*伸缩盒子*/
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
    }
}

.search_content{
    /*上外边距：*/
    margin-top: 30rpx;
    .search_item{
        background-color:#fff;
        font-size: 26rpx;
        padding: 15rpx 10rpx;
        border-bottom:1rpx solid#ccc;

        /*溢出：隐藏*/
        overflow: hidden;
        /*空格：不换行*/
        white-space: nowrap;
        /*文字溢出：省略号*/
        text-overflow:ellipsis;
    }
}