商品搜索框
分析
顶部改为"搜索"
界面由一个输入框和一个按钮(按钮做摆设的😄),搜索的内容由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;
}
效果图展示
完成~