首页 > 小程序教程 > 微信小程序各类生活服务带打电话搜索功能样式模板制作设计下载

微信小程序各类生活服务带打电话搜索功能样式模板制作设计下载

上一篇 下一篇
今天给大家带来顶部简单纯文字导航列表,制作好以后效果图如下:
一、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
  • 下载次数 17,846次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-30
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 微信素材 html5 单页式简历模板 微信模板 自适应 微信公众平台 响应式 微信文章 企业网站
您可能会喜欢的其他模板