开始

搜索页目前没法搜索
image.png

image.png
先来配置页面，希望可以上拉刷新，隐藏它的滚动条。
开启下拉刷新。
image.png

  1. "enablePullDownRefresh": true,

滚动条和回弹已经关了
image.png

可以下拉刷新
image.png
用首页的这种样式
image.png
引入首页也引用的indexList组件。
image.png

  1. import indexList from '@/components/index/index-list.vue';

复制首页的list的数据。
image.png

  1. list: [{
  2.                                 userpic: "../../static/demo/userpic/12.jpg",
  3.                                 username: "昵称",
  4.                                 isguanzhu: false,
  5.                                 title: "我是标题",
  6.                                 type: "img", // img:图文,video:视频
  7.                                 titlepic: "../../static/demo/datapic/11.jpg",
  8.                                 infonum: {
  9.                                     index: 0, //0:没有操作，1:顶,2:踩；
  10.                                     dingnum: 11,
  11.                                     cainum: 11,
  12.                                 },
  13.                                 commentnum: 10,
  14.                                 sharenum: 10,
  15.                             },
  16.                             {
  17.                                 userpic: "../../static/demo/userpic/12.jpg",
  18.                                 username: "昵称",
  19.                                 isguanzhu: true,
  20.                                 title: "我是标题",
  21.                                 type: "video", // img:图文,video:视频
  22.                                 titlepic: "../../static/demo/datapic/11.jpg",
  23.                                 playnum: "20w",
  24.                                 long: "2:47",
  25.                                 infonum: {
  26.                                     index: 1, //0:没有操作，1:顶,2:踩；
  27.                                     dingnum: 11,
  28.                                     cainum: 11,
  29.                                 },
  30.                                 commentnum: 10,
  31.                                 sharenum: 10,
  32.                             }
  33.                         ]

image.png

  1. <block v-for="(item,index) in list" :key="index">
  2.             <index-list :item="item" :index="index"></index-list>
  3.         </block>

image.png
复制首页空数据显示的组件
image.png

  1.     <template v-else>
  2.                             <no-thing></no-thing>
  3.                         </template>

image.png

  1. import noThing from '@/components/common/no-thing.vue';

image.png

  1. <template v-if="list.length>0">
  2.             <block v-for="(item,index) in list" :key="index">
  3.                 <index-list :item="item" :index="index"></index-list>
  4.             </block>
  5.         </template>

否则显示空
image.png

  1. <template v-else>
  2.         <no-thing></no-thing>
  3. </template>

复制上拉加载
image.png

  1. <!-- 上拉加载 -->
  2.             <load-more :loadtext="items.loadtext"></load-more>

image.png

  1. import noThing from '@/components/common/no-thing.vue';
  3. noThing

放在最外层
image.png

  1. loadtext:'上拉加载更多',

image.png

  1. <load-more :loadtext="items.loadtext"></load-more>

换成当前页面的属性变量
image.png

  1. <load-more :loadtext="loadtext"></load-more>

监听上拉加载
复制首页的loadMore方法。
image.png

image.png

这里我们不传任何值
image.png
这些都改成当前页的数据
image.png

  1. // 上拉加载
  2.             loadmore() {
  3.                 if (this.loadtext != "上拉加载更多") {
  4.                     return;
  5.                 }
  6.                 // 修改状态
  7.                 this.loadtext = "加载中...";
  8.                 // 获取数据
  9.                 setTimeout(() => {
  10.                     //获取完成
  11.                     let obj = {
  12.                         userpic: "../../static/demo/userpic/12.jpg",
  13.                         username: "昵称",
  14.                         isguanzhu: false,
  15.                         title: "我是标题",
  16.                         type: "img", // img:图文,video:视频
  17.                         titlepic: "../../static/demo/datapic/11.jpg",
  18.                         infonum: {
  19.                             index: 0, //0:没有操作，1:顶,2:踩；
  20.                             dingnum: 11,
  21.                             cainum: 11,
  22.                         },
  23.                         commentnum: 10,
  24.                         sharenum: 10,
  25.                     };
  26.                     this.list.push(obj);
  27.                     this.loadtext = "上拉加载更多";
  28.                 }, 1000);
  29.                 // this.loadtext="没有更多数据了";
  30.             }

image.png

  1. onReachBottom() {
  2.             this.loadmore();
  3.         },

搜索事件
image.png
来模拟后端加载的数据
image.png
image.png

image.png

image.png

image.png
image.png

  1. // 搜索事件
  2.             getdata() {
  3.                 uni.showLoading({
  4.                     title: '加载中',
  5.                     mask: false
  6.                 });
  7.                 // 请求服务器 post keyword：val
  8.                 setTimeout(() => {
  9.                     let arr = [{
  10.                             userpic: "../../static/demo/userpic/12.jpg",
  11.                             username: "昵称",
  12.                             isguanzhu: false,
  13.                             title: "我是标题",
  14.                             type: "img", // img:图文,video:视频
  15.                             titlepic: "../../static/demo/datapic/11.jpg",
  16.                             infonum: {
  17.                                 index: 0, //0:没有操作，1:顶,2:踩；
  18.                                 dingnum: 11,
  19.                                 cainum: 11,
  20.                             },
  21.                             commentnum: 10,
  22.                             sharenum: 10,
  23.                         },
  24.                         {
  25.                             userpic: "../../static/demo/userpic/12.jpg",
  26.                             username: "昵称",
  27.                             isguanzhu: true,
  28.                             title: "我是标题",
  29.                             type: "video", // img:图文,video:视频
  30.                             titlepic: "../../static/demo/datapic/11.jpg",
  31.                             playnum: "20w",
  32.                             long: "2:47",
  33.                             infonum: {
  34.                                 index: 1, //0:没有操作，1:顶,2:踩；
  35.                                 dingnum: 11,
  36.                                 cainum: 11,
  37.                             },
  38.                             commentnum: 10,
  39.                             sharenum: 10,
  40.                         }
  41.                     ];
  42.                     this.list = arr;
  43.                     uni.hideLoading();
  44.                     this.issearch = true;
  45.                 }, 1000);
  46.             },

image.png

  1. // 监听点击搜索按钮事件
  2.         onNavigationBarSearchInputConfirmed(e) {
  3.             if (e.text) {
  4.                 this.getdata(e.text);
  5.             }
  6.         },

image.png
这个是取消按钮
image.png

  1. // 监听搜索框文本变化
  2.         onNavigationBarSearchInputChanged(e) {
  3.             if (e.text) {
  4.                 this.getdata(e.text);
  5.             }
  6.         },

image.png
有值才传过去
image.png

监听搜索框的变化。
image.png

  1. // 监听搜索框文本变化
  2.         onNavigationBarSearchInputChanged(e) {
  3.             if (e.text) {
  4.                 this.getdata(e.text);
  5.             }
  6.         },

默认的数据就可以删了
image.png
默认的显示。、
image.png
输入关键字搜索
image.png

判断用户是否点击了搜索

image.png

  1. issearch:false,

image.png

  1. <template v-else-if="issearch && list.length<1">
  2.         <no-thing></no-thing>
  3. </template>

点击搜索后，设置为true
image.png

  1. // 监听点击搜索按钮事件
  2.         onNavigationBarSearchInputConfirmed(e) {
  3.             console.log("监听点击搜索按钮事件" + JSON.stringify(e.text));
  4.             if(e.index){
  5.                 this.issearch=true;
  6.                 this.getdata(e.index);
  7.             }
  8.         },

默认是空的，
image.png
也可以放到请求服务器之后。再设置为true
image.png

  1. uni.hideLoading();
  2.                     this.issearch = true;

搜索到的数据如果为空
image.png

搜索不到的情况
image.png

本节代码

  1. <template>
  2.     <view>
  3.         <template v-if="list.length>0">
  4.             <block v-for="(item,index) in list" :key="index">
  5.                 <index-list :item="item" :index="index"></index-list>
  6.             </block>
  7.             <!-- 上拉加载 -->
  8.             <load-more :loadtext="loadtext"></load-more>
  9.         </template>
  10.         <template v-else-if="issearch && list.length<1">
  11.             <no-thing></no-thing>
  12.         </template>
  13.     </view>
  14. </template>
  16. <script>
  17.     import indexList from '@/components/index/index-list.vue';
  18.     import loadMore from '@/components/common/load-more.vue';
  19.     import noThing from '@/components/common/no-thing.vue';
  20.     export default {
  21.         components: {
  22.             indexList,
  23.             loadMore,
  24.             noThing
  25.         },
  26.         data() {
  27.             return {
  28.                 issearch:false,
  29.                 loadtext: '上拉加载更多',
  30.                 list: []
  31.             }
  32.         },
  33.         // 监听原生标题导航按钮点击事件
  34.         onNavigationBarButtonTap(e) {
  35.             if (e.index == 0) {
  36.                 uni.navigateBack({
  37.                     delta: 1
  38.                 });
  39.             }
  40.         },
  41.         // 监听搜索框文本变化
  42.         onNavigationBarSearchInputChanged(e) {
  43.             console.log("监听点击搜索按钮事件" + JSON.stringify(e.text));
  44.         },
  45.         // 监听点击搜索按钮事件
  46.         onNavigationBarSearchInputConfirmed(e) {
  47.             console.log("监听点击搜索按钮事件" + JSON.stringify(e.text));
  48.             if(e.index){
  49.                 this.issearch=true;
  50.                 this.getdata(e.index);
  51.             }
  52.         },
  53.         onReachBottom() {
  54.             this.loadmore();
  55.         },
  56.         // 监听点击搜索按钮事件
  57.         onNavigationBarSearchInputConfirmed(e) {
  58.             if (e.text) {
  59.                 this.getdata(e.text);
  60.             }
  61.         },
  62.         // 监听搜索框文本变化
  63.         onNavigationBarSearchInputChanged(e) {
  64.             if (e.text) {
  65.                 this.getdata(e.text);
  66.             }
  67.         },
  68.         methods: {
  69.             // 搜索事件
  70.             getdata() {
  71.                 uni.showLoading({
  72.                     title: '加载中',
  73.                     mask: false
  74.                 });
  75.                 // 请求服务器 post keyword：val
  76.                 setTimeout(() => {
  77.                     let arr = [{
  78.                             userpic: "../../static/demo/userpic/12.jpg",
  79.                             username: "昵称",
  80.                             isguanzhu: false,
  81.                             title: "我是标题",
  82.                             type: "img", // img:图文,video:视频
  83.                             titlepic: "../../static/demo/datapic/11.jpg",
  84.                             infonum: {
  85.                                 index: 0, //0:没有操作，1:顶,2:踩；
  86.                                 dingnum: 11,
  87.                                 cainum: 11,
  88.                             },
  89.                             commentnum: 10,
  90.                             sharenum: 10,
  91.                         },
  92.                         {
  93.                             userpic: "../../static/demo/userpic/12.jpg",
  94.                             username: "昵称",
  95.                             isguanzhu: true,
  96.                             title: "我是标题",
  97.                             type: "video", // img:图文,video:视频
  98.                             titlepic: "../../static/demo/datapic/11.jpg",
  99.                             playnum: "20w",
  100.                             long: "2:47",
  101.                             infonum: {
  102.                                 index: 1, //0:没有操作，1:顶,2:踩；
  103.                                 dingnum: 11,
  104.                                 cainum: 11,
  105.                             },
  106.                             commentnum: 10,
  107.                             sharenum: 10,
  108.                         }
  109.                     ];
  110.                     this.list = arr;
  111.                     uni.hideLoading();
  112.                     this.issearch = true;
  113.                 }, 1000);
  114.             },
  115.             // 上拉加载
  116.             loadmore() {
  117.                 if (this.loadtext != "上拉加载更多") {
  118.                     return;
  119.                 }
  120.                 // 修改状态
  121.                 this.loadtext = "加载中...";
  122.                 // 获取数据
  123.                 setTimeout(() => {
  124.                     //获取完成
  125.                     let obj = {
  126.                         userpic: "../../static/demo/userpic/12.jpg",
  127.                         username: "昵称",
  128.                         isguanzhu: false,
  129.                         title: "我是标题",
  130.                         type: "img", // img:图文,video:视频
  131.                         titlepic: "../../static/demo/datapic/11.jpg",
  132.                         infonum: {
  133.                             index: 0, //0:没有操作，1:顶,2:踩；
  134.                             dingnum: 11,
  135.                             cainum: 11,
  136.                         },
  137.                         commentnum: 10,
  138.                         sharenum: 10,
  139.                     };
  140.                     this.list.push(obj);
  141.                     this.loadtext = "上拉加载更多";
  142.                 }, 1000);
  143.                 // this.loadtext="没有更多数据了";
  144.             }
  145.         }
  146.     }
  147. </script>
  149. <style>
  151. </style>

结束