今天给大家带来顶部简单纯文字导航列表,制作好以后效果图如下:
一、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 () {
}
})
|