首页 > 上网技巧 > 电脑小技巧 > react+framework7实现商品搜索页面

react+framework7实现商品搜索页面

时间:2019-02-09 09:45 作者:QQ地带 我要评论

最近在做一个移动端的搜索页面,功能包括历史搜索和热门搜索;如下图所示:
 
 
 
大致意思:当用户点击输入框的时候,会自动调起软键盘,输入内容后输入框后面会有个小×号,点击小×号可清空输入框内容,点击右边的取消会返回上一级,输入内容后可点击软键盘上的搜索按钮跳转到关键字的页面,并且把该关键字保存到历史搜索中,最多保存10条数据,点击清空出现提示,确定清空,取消无作用;点击每个关键词都会跳转到对应的页面。
 
哈哈,有点啰嗦,直接看功能点。
 
一、input:
 
1、调起的软键盘右下角为搜索字样:
 
<form action="#">
    <input type="search"/>
</form>
2、输入的值为空处理:
 
value.trim()
3、监听软键盘上的搜索事件:
 
react中用
 
event.which == 13;
二、保存输入的内容:在向localStorage存储的时候,以点击搜索的时间戳为key,以搜索的词语为value.最多存储10条数据。当超过10条,会删除最早的记录。
 
可参考这篇文章;
 
三、点击任意关键词跳转:
 
this.state.listItems.map((item, index) => {
  return (
    <div className="listItem" key={index} onClick={this.clickhref.bind(this, item)}>{item}</div>
  );
})
 
clickhref = (item) => {
  console.log(item);
}
给每个关键词绑定一个事件,并传入相应的item或者index值,就可以拿到对应的元素编号或者内容获取当前的关键字传入到clickhref方法中,再处理;
 
可穿越到我的github中查看相关代码。
 
意外收获:
 
1、-webkit-line-clamp: 2;保持文字行数(2行),超过显示省略号配合-webkit-box-orient使用;
 
webpck不能编译这个属性-webkit-box-orient: vertical
 
/* autoprefixer: off*/
-webkit-box-orient: vertical;
/* autoprefixer: on*/
2、react中给某个标签添加属性
 
{`text1 ${this.state.bol ? 'text2' : 'text3'}`}
3、window.confirm (message, ok, cancel);
 
window.app.confirm('是否删除?', () => {
    console.log('ok');
}, () => {
   console.log('cancel');
});
4、position设置fixed,固定在页面的底部,随着页面滚动按钮也会抖动。这个页面主要发生在IOS的微信端;安卓正常;
 
-webkit-transform: translateZ(0);

标签: 微信
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告