<view class="search"> <view class="search_top"> <input placeholder="请输入搜索内容" bindinput="handleInput" value="{{value}}"></input> <button bindtap="handleSearch">{{isSearching ? '取消' : '搜索'}}</button> </view> <navigator class="goods_item" wx:for="{{goods}}" url="/pages/details/details?goods_id={{item.goods_id}}" wx:if="{{isSearching}}">{{item.goods_name}}</navigator> </view>
const { registerUniformDesc } = require("XrFrame/xrFrameSystem") Page({ data: { goods: [], value: '', isSearching: false }, onl oad: function(options) { this.requestCategories() }, handleInput(e) { this.setData({ value: e.detail.value }) }, handleSearch() { const { value, isSearching } = this.data if (isSearching) { this.setData({ value: '', isSearching: false, goods: [] }) } else { if (!value) { registerUniformDesc } this.requestGoods(value) this.setData({ isSearching: true }) } }, requestCategories() { wx.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories', success(res) { console.log(res) } }) }, requestGoods(query) { const that = this wx.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch', data: { query: query }, success(res) { that.setData({ goods: res.data.message }) } }) } })
page{ background-color: #ddd; } .search_top{ padding: 20rpx; height: 70rpx; display: flex; } .search_top input{ flex: 4; background-color: #fff; height: 100%; font-size: 25rpx; padding-left: 20rpx; } .search_top button{ flex:1; width: 150rpx; font-size: 20rpx; } .goods_item{ font-size: 32rpx; padding: 10rpx; border-bottom: 2rpx solid #eee; height: 60rox; line-height: 60rpx; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
标签:goods,isSearching,取消,res,value,height,api,搜索 From: https://www.cnblogs.com/yhgz/p/17779766.html