首页 > 小程序教程 > 微信小程序便民分类服务搜索列表导航设计制作开发教程

微信小程序便民分类服务搜索列表导航设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序便民分类服务搜索列表导航设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/shenghuo/AllServiceclassify/AllServiceclassify.wxml-->
<!--<text>pages/shenghuo/AllServiceclassify/AllServiceclassify.wxml</text>-->

<import src="HeaderSection/HeaderSection.wxml" />

<view class="allService-container">
  <scroll-view class="scroll-container" scroll-y="true">

    <view class="search-bg1"></view>
    <view class="search-box">
      <view class="search-city">玉溪市</view>
      <view class="search-icon">
        <input placeholder="点击搜索" />
      </view>
    </view>

    <view class="fuwufl-item-list">


      <block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="key">
        <template is="HeaderSection" data="{{...item,index}}"></template>
      </block>
    </view>
  </scroll-view>





</view>
 
二、wxss样式文件代码如下:
/* pages/shenghuo/AllServiceclassify/AllServiceclassify.wxss */

@import "HeaderSection/HeaderSection.wxss";

.allService-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.scroll-container {
  display: block;
  width: 100%;
  height: 100%;
}

.search-bg1 {
  height: 55px;
  position: relative;
  top: 0px;
  z-index: 1;
  background-color: #f5f5f9;
}

.search-box {
  height: 33px;
  position: absolute;
  width: 94%;
  z-index: 2;
  top: 10px;
  margin: 0 3% 0 3%;
  background-color: white;
  display: -webkit-flex;
  display: flex;
  font-size: 13px;
  border-radius: 3px;
}

.search-city {
  width: 75px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #e1e1e1;
  margin: 6px 0 6px 5px;
  padding-right: 5px;
}

.search-icon {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.fuwufl-item-list{
  width: 100%;
  border-top: solid #efefef 1px;
  background: #ffffff;
}
三、js页面代码如下:
// pages/shenghuo/AllServiceclassify/AllServiceclassify.js

const config = require('../../../config')
var util = require('../../../utils/util.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: []
  },

  //点击头部
  goToSecondaryService: function(e) {

    var index = e.currentTarget.dataset.sectionIndex;

    var url = 'SecondaryService/SecondaryService?index=' + index;
    wx.navigateTo({
      url:  url,
    })

  },

  //点击cell
  tapGridCell: function(e) {
    var CategoryId = e.currentTarget.dataset.categoryId;
    var url = 'ServiceCategoryList/ServiceCategoryList?CategoryId=' + CategoryId;

    wx.navigateTo({
      url: url,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this

    let url = config.ServiceTypeListUrl
    let para = {}

    util.RequestManager(url, para, function (res, fail) {
      console.log(res)
      that.setData({list:res.data})
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

模板简介:该模板名称为【微信小程序便民分类服务搜索列表导航设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 18,516次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-26
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信素材 html5 企业网站 微信文章 微信图片 微信模板 自适应 表格式简历模板 微信公众平台 单页式简历模板
您可能会喜欢的其他模板