微信小程序活动设计

效果图及结构

效果图

结构

图片资源

完整源码

activity.wxml

<view class='activity_view1'>
  <input class='activity_search_input' confirm-type="search" maxlength="30" bindinput='wxSearchInput' value='{{keyword}}' bindconfirm='wxSearchFn' bindfocus="wxSerchFocus" bindblur="wxSearchBlur" placeholder='请输入搜索内容'></input>
  <button class='activity_search_btn' bindtap="wxSearchFn" hover-class='button-hover'>搜索</button>
</view>

<view class="activity_boxtab {{HomeIndex == 0 ?'on':''}}" bindtap="boxtwo" data-index="0">网络类</view>
<view class="activity_boxtab {{HomeIndex == 1 ?'on':''}}" bindtap="boxtwo" data-index="1">建筑类</view>
<view class="activity_boxtab {{HomeIndex == 2 ?'on':''}}" bindtap="boxtwo" data-index="2">会计类</view>
<view class="activity_boxtab {{HomeIndex == 3 ?'on':''}}" bindtap="boxtwo" data-index="3">游戏类</view>
<view class="activity_boxtab {{HomeIndex == 4 ?'on':''}}" bindtap="boxtwo" data-index="4">教育类</view>

activity.wxss

/*头部搜索部分*/
.activity_view1 {
  position: relative;
  overflow: hidden;
  height: 70rpx;
  padding: 20rpx 20rpx 25rpx 60rpx;
  background-color: #6699FF;
}
  /*搜索框*/
 .activity_search_input {
   float: left;
   width: 500rpx;
   height: 70rpx;
   font-size: 35rpx;
   background-color: white;
 }
 /*搜索按钮*/
 .activity_search_btn {
   width: 70rpx!important;
   height: 70rpx!important;
   background-color: rgb(159, 217, 255);
   font-size: 20rpx;
   color: #fff;
   border: none;
 }
 /* 分类设计 */
 .activity_boxtab{
   display: inline-block;
   width: 20%;
   height: 90rpx;
   line-height: 90rpx;
   border-bottom: 1rpx solid #ededed;
   box-sizing: border-box;
   text-align: center;
   color: black;
   font-size: 30rpx
 }
 .on{
   color:#405F80;
   border-bottom: 5rpx solid #405F80;
 }

activity.js

Page({
  data:{
    newsList:[],
    HomeIndex:0
  },
  //搜索方法 key为用户输入的查询字段
  activity_view1: function (key) {
    /* console.log('搜索函数触发') */
    var that = this;
    var newsList = wx.getStorage({
      key: 'newsList',
      success: function (res) {//从storage中取出存储的数据*/
        /* console.log(res) */
        if (key == '') {//用户没有输入 全部显示
          that.setData({
          newsList: res.data
     })
     return;
    }
    var arr = [];//临时数组 用于存放匹配到的数据
    for (let i in res.data) {
     if (res.data[i].title.indexOf(key) >= 0) {//查找
      arr.push(res.data[i])
     }
    }
    if (arr.length == 0) {
     that.setData({
      newsList:[]
     })
    } else {
     that.setData({
      newsList: arr//在页面显示找到的数据
     })
    }
   }
  })
  },
  wxSearchInput: function (e) {
    this.search(e.detail.value);
    console.log(e.detail.value)
    },
    boxtwo: function (e) {
      var index = parseInt(e.currentTarget.dataset.index)
      this.setData({
       HomeIndex: index
      })
     }
})

activity.json

{
  "usingComponents": {}
}