本文给大家带来的是微信小程序玉溪市点击搜索春搜索功能设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/shenghuo/AllServiceclassify/SecondaryService/SecondaryService.wxml-->
<!--<text>pages/shenghuo/AllServiceclassify/SecondaryService/SecondaryService.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">
<template is="HeaderSection" data="{{...dic}}"></template>
</view>
</scroll-view>
</view>
|
二、wxss样式文件代码如下：
/* pages/shenghuo/AllServiceclassify/SecondaryService/SecondaryService.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/SecondaryService/SecondaryService.js
const config = require('../../../../config')
var util = require('../../../../utils/util.js')
Page({
/**
* 页面的初始数据
*/
data: {
dic: []
},
//点击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
console.log(options.index)
var index = options.index;
let url = config.ServiceTypeListUrl
let para = {}
util.RequestManager(url, para, function (res, fail) {
console.log(res)
that.setData({ dic: res.data[index] })
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
