微信小程序商城项目实战(第六篇:商品搜索)

商品搜索框

• 分析
• 代码实现
  • 效果图展示

分析

顶部改为"搜索"
界面由一个输入框和一个按钮(按钮做摆设的😄),搜索的内容由view展示,并且点击成功跳转对应商品
随着输入框的内容被改变紧跟着就会发出请求获取相关商品

代码实现

改变顶部导航内容"navigationBarTitleText": "搜索"
界面:

<view class="find">
<input type="text" placeholder="请输入关键字" bindinput="find" /><button size="mini" type="default">搜索</button>
</view>
<view>
    <navigator url="/pages/goods_detail/goods_detail?goods_id={{item.goods_id}}" wx:for="{{findList}}" wx:key="goods_id" class="msg">{{item.goods_name}}</navigator>
</view>

js

import {request} from '../../utils/request'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        findList:[]
    },
    find(e){
        this.getsearch(e.detail.value)
    },
    async getsearch(val){
        let ret=await request('goods/qsearch',{query:val})
        console.log(ret);
        this.setData({
            findList:ret.data.message
        })
    },
})

css样式

通过使用white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
使得溢出部分…显示

input{
    border: black;
    margin: 20rpx;
    flex: 4;
    border: black solid 3rpx;
}
.find{
    display: flex;
}
.find button{
    margin: 10rpx;
    flex: 1;
}
.msg{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100vw;
    background-color: #f1f1f1;
    padding: 30rpx;
    border-bottom: #666666 solid 3rpx;
}

效果图展示

完成~