1
2
3
4
5
6
7
8
//九宫格页面
 <view class="grid-list">
    <navigator  class="grid-item" wx:for="{{gridList}}" wx:key="item.id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
      <image src="{{item.icon}}" mode=""/>
      <text>{{item.name}}</text>
    </navigator>
  </view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//九宫格css文件
.grid-list{
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}
.grid-item{
  width: 33.33%;
  height: 200rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}
.grid-item image{
  width: 60rpx;
  height: 60rpx;

}
.grid-item text{
  font-size: 24rpx;
  margin-top: 10rpx;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//九宫格js文件
Page({
  data: {
     gridList:[],//存放九宫格数据的列表
  },
  onLoad(){
    this.getGrid()
  
  },
  //获取九宫格数据
  getGrid(){
    wx.request({
      url:"https://www.escook.cn/categories",
      method:'GET',
      success:(res:any)=>{
        console.log(res)
        this.setData({
          gridList:res.data
        })
      }
    })
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//详情页页面
<!--pages/shoplist/shoplist.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="item.id">
  <view class="thumb">
    <image src="{{item.images[0]}}" mode="widthFix" data-list="{{item.images[0]}}" data-src="{{item.images[0]}}" bindtap="yuLan"/>
  </view>
  <view class="info">
    <text class="shop-title">{{item.name}}</text>
    <text>电话：{{item.phone}}</text>
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHours}}</text>
  </view>
</view>

1
2
3
4
5
6
7
8
9
//详情页json文件
{
  "usingComponents": {},
  "onReachBottomDistance": 200,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//详情页css文件
/* pages/shoplist/shoplist.wxss */
.shop-item{
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  border-radius: 8rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.thumb image{
  width: 250rpx;
  height: 250rpx;
  display: block;
  margin-right: 15rpx;
}
.info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.shop-title{
  font-weight: bold;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
//详情页js文件
// pages/shoplist/shoplist.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //存放上一个页面传递过来的参数
    query:{},
    //存放详情页的列表数据
    shopList:[],
    //分页默认第一页展示
    page:1,
    //每页请求几条数据
    pageSize:10,
    //总数（默认为0）
    total:0,
    isLoading:false//节流阀
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query:options
    })
    this.getShopList()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title
    })
  },
getShopList(cb){
  this.setData({
    isLoading:true
  })
  //展示loading
  wx.showLoading({
    title:"数据加载中..."
  })
  wx.request({
    url:`https://www.escook.cn/categories/${this.data.query.id}/shops`,
    method:'GET',
    data:{
      _page:this.data.page,
      _limit:this.data.pageSize
    },
    success:(res)=>{
      console.log(res)
      this.setData({
        //新旧数据进行合并
        shopList:[...this.data.shopList,...res.data],
        //给总数进行赋值，由于是字符类型，-0隐式转换为数字类型
        total:res.header['X-Total-Count']-0
      })
    },complete:()=>{
      //隐藏loading
      wx.hideLoading()
      this.setData({
        isLoading:false
      })
      //短路运算，判断用户传没传cb，传的话就调用cb()对应的回调函数
      cb&&cb()
    }
  })
},
// 预览图片
  yuLan(e){
    var src=e.currentTarget.dataset.src//获取data-src
    var imageList = this.data.shopList.map(item=>{
      return item.images[0]//获取data-list
    })
    // console.log(this.data.shopList[0])
    //图片预览
    wx.previewImage({
      current:src,//当前显示图片的  链接
      urls:imageList//需要预览图片的列表
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    //需要重置关键的数据
    this.setData({
      page:1,
      shopList:[],
      total:0
    })
    //重新发起请求
    this.getShopList(()=>{
      //调用微信提供的api事件，手动关闭下拉窗口
      wx.stopPullDownRefresh()
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    //上拉触底之后让分页自增加一
    if(this.data.page*this.data.pageSize>=this.data.total){
      //证明没有下一页数据了
      return wx.showToast({
        title:"人家也是有底线的",
        icon:'none'
      })
    }
    if(!this.data.isLoading)
    this.setData({
      page:this.data.page+1
    })
    //请求分页数据
    this.getShopList()
    console.log("ok")
  },

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

  }
})

1
2
3
4
5
6
7
<view class='parentstyle '>
    <view class='centerStyle' bindtap="show">
      <input password='{{passwordType}}' maxlength="20" placeholder="请输入密码" style='font-size:34rpx'></input>
      <text style="display: block;width:100rpx" wx:if="{{isShow}}" class='imageStyle' bindtap='eyeStatus'>{{defaultType? "闭眼": "睁眼"}}</text>
    </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.parentstyle {
  display: flex;
  align-items: center;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  box-shadow: 0 0 5rpx #e0e0e0;
  margin: 30rpx 38px;
  padding: 20rpx;
}

.parentstyle .imageStyle {
  width: 41rpx;
  height: 41rpx;
  margin-right: 20rpx;
}

.parentstyle .centerStyle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Page({
  data: {
    defaultType: true,
    passwordType: true,
    isShow:false
  },
  //defaultType：眼睛状态   passwordType：密码可见与否状态
  eyeStatus: function(){
    this.data.defaultType= !this.data.defaultType
    this.data.passwordType= !this.data.passwordType
    this.setData({
      defaultType: this.data.defaultType,
      passwordType: this.data.passwordType,
  
  })

  },
show(){
this.setData({
  isShow:true
})
}
})

1
2
3
4
5
6
7
8
9
//scroll-y开启纵向滚动
<!--pages/home/home.wxml-->
  <scroll-view class="box" scroll-y>
    <view wx:for="{{arr}}" wx:key="index">
      {{item}}
    </view>
    
  </scroll-view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* pages/home/home.wxss */
.box{
  display: flex;
  justify-content: space-between;
  border: 1rpx solid black;
  width: 100rpx;
  height: 120rpx;
}
.box view{
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}
//奇偶数判断
.box view:nth-child(2n){
  background: red;
}
.box view:nth-child(2n-1){
  background: blue;
}

1
2
3
4
5
//数据源设置
data: {
    arr:['a','b','c','d','e','f','g']
  },

1
2
3
4
5
6
7
8
<!--pages/home/home.wxml-->
  <scroll-view class="box" scroll-x>
    <view wx:for="{{arr}}" wx:key="index">
      {{item}}
    </view>
    
  </scroll-view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* pages/home/home.wxss */
.box{
  display: flex;
  justify-content: space-between;
  border: 1rpx solid black;
  overflow-x: auto;
  width: 340rpx;
  height: 100rpx;
  white-space: nowrap;
}
.box view{
  display: inline-block;
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}
.box view:nth-child(2n){
  background: red;
}
.box view:nth-child(2n-1){
  background: blue;
}

1
2
3
4
5
//数据源设置
data: {
    arr:['a','b','c','d','e','f','g']
  },

1
2
3
4
5
6
7
8
<!--pages/home/home.wxml-->
  <swiper class="box" indicator-dots >
    <swiper-item wx:for="{{arr}}" wx:key="index">
      {{item}}
    </swiper-item>
    
  </swiper>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* pages/home/home.wxss */
.box{
  height: 400rpx;
}
.box swiper-item{
  width: 100%;
  text-align: center;
  line-height: 400rpx;
}
.box swiper-item:nth-child(2n){
  background: red;
}
.box swiper-item:nth-child(2n-1){
  background: blue;
}

1
2
3
4
5
//数据源设置
data: {
    arr:['a','b','c','d','e','f','g']
  },

1
2
3
4
5
<!--pages/home/home.wxml-->
  <view >
   长按选中手机号：<text user-select>1843678656</text>
  </view>

1
2
3
4
5
<!--pages/home/home.wxml-->
  <view >
    <rich-text nodes="<h1 style='color:blue'>我是标题</h1>"/>
  </view>