wxml

<!--index.wxml-->

<!--轮播图滚动效果-->

<view class="head">

  <input type="text" placeholder="请输入需要搜索的内容"></input>

</view>

<swiper indicator-dots autoplay interval="5000" duration="500">

  <block wx:for="{{swiperImg}}" wx:key="swiper{{index}}">

    <swiper-item>

      <image

        src="{{item.src}}"

        class="slide-image" />

    </swiper-item>

  </block>

</swiper>

<!--新闻列表-->

<view id="news-list">

<view class="list-item" wx:for="{{newslist}}"

wx:for-item="news" wx:key="{{news.id}}"> 

   <image 

   src="{{news.poster}}"></image>

   <text bindtap = "goToDetail" data-id="{{news.id}}">❈ {{news.title}}

     ————{{news.add_date}}</text>

</view>

</view>

WXSS

.head{

  background-color: #707070;

  height: 50px;

  overflow: hidden;

}

.head input{

  width: 80%;

  background-color: #fff;

  height: 30px;

  margin-top: 10px;

  margin-left: auto;

  margin-right: auto;

  border-radius: 21px;

  font-size: 12px;

  padding-left: 6px;

  padding-right: 6px;

}

/*轮播图组件*/

swiper{

  height: 400rpx;

}

/*轮播图图片*/

swiper image{

  width: 100%;

  height: 100%;

}

json

{

  "usingComponents": {}

}

JS

// index.js

var common = require('../../utils/common.js')

Page({

  /**

   * 页面的初始数据

   */

  data: {

    //轮播图素材

    swiperImg:[

      {src:'http://www.zjbc.edu.cn/_upload/article/images/b3/9f/5e88b71e4e4685fef239e199450f/9a1c6928-8bd9-44fc-87ce-350b937df0b4.jpg'},

      {src:'http://www.zjbc.edu.cn/_upload/article/images/8e/36/87c3965f47159fcc2aef795f28a6/ef374663-4d8d-4c60-be25-10849d24ec13.jpg'},

      {src:'http://www.zjbc.edu.cn/_upload/article/images/ac/f4/81f582084f97acfbb6d4fe480621/a751b2ac-643d-4b04-aa7a-6f49607789a5.jpg'}

    ]

  },

  /**

   * 自定义函数--跳转

   */

  goToDetail: function (e) {

    //获取新闻id

    let id = e.currentTarget.dataset.id

    //跳转新页面

    wx.navigateTo({

      url: '../detail/detail?id='+id,

    })

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    // 获取新闻列表

    let list = common.getNewsList()

    //更新新闻列表

    this.setData({

      newslist:list

    })

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  }

})

只实现了搜索框这个样式在首页出现，但是实际的搜索功能如何实现？