微信列表展示与详情页
列表展示效果图（图片来源于网络）
wxml代码部分：
1 <!-- 列表页面 -->
2 <view class="view">
3 <view class="list">
4 <block class="block" wx:for="{{data}}" wx:key="key">
5 <view class="box">
6 <!-- 点击携带参数页面跳转 -->
7 <navigator url="/pages/demo3/demo3?id={{item.gid}}">
8 <view class="image">
9 <image src="{{item.image}}" />
10 </view>
11 <view class="text">
12 <text class="name">{{item.goodsname}}</text>
13 <text class="price">价格:{{item.price}}</text>
14 </view>
15 </navigator>
16 </view>
17 </block>
18 </view>
19 </view>
js代码部分
1 Page({
2
3 /**
4 * 页面的初始数据
5 */
6 data: {
7 data:[]
8
9 },
10
11 /**
12 * 生命周期函数--监听页面加载
13 */
14 onLoad: function (options) {
15 //页面初始 获取数据
16 wx.request({
17 url: 'http://www.xxxx.com/index.php/wxxcx/xxx/lists',
18 data: {},
19 header: {'content-type':'application/json'},
20 method: 'GET',
21 dataType: 'json',
22 responseType: 'text',
23 success: (result)=>{
24 this.setData({
25 data:result.data.data
26 })
27 console.log(result.data.data)
28 },
29 fail: ()=>{},
30 complete: ()=>{}
31 });
32
33 },
php代码部分
1 //列表展示
2 public function lists(){
3 $data = \app\wxxcx\model\xxx::select();
4 if ($data){
5 return json(['code'=>200,'msg'=>'success','data'=>$data]);
6 }else{
7 return json(['code'=>500,'msg'=>'error','data'=>""]);
8 }
9 }
wxss代码部分 （样式）
1 .list{ 2 width: 100%; 3 background-color: #eeeeee; 4 /* 弹性盒子 */ 5 display: flex; 6 justify-content: space-around; 7 /* 可自动换行 */ 8 flex-wrap: wrap; 9 text-align: center; 10 11 } 12 .box{ 13 width: 30%; 14 height: 300rpx; 15 /* background-color: aquamarine; */ 16 margin-top: 10rpx; 17 } 18 .image{ 19 width: 100%; 20 height: 240rpx; 21 /* background-color: bisque; */ 22 } 23 .image image{ 24 width: 100%; 25 height: 240rpx; 26 } 27 .text{ 28 width: 100%; 29 height: 50rpx; 30 /* background-color: blue; */ 31 } 32 .text .name{ 33 font-size: 20rpx; 34 } 35 .text .price{ 36 font-size: 20rpx; 37 color: crimson; 38 }
二、详情页部分+留言
wxml代码部分
1 <view class="big">
2 <!-- 商品展示部分 -->
3 <view class="box">
4 <view class="image">
5 <!-- 图片 -->
6 <image src="{{data.image}}" />
7 </view>
8 <view class="text">
9 <view class="top">商品名称：{{data.goodsname}}</view>
10 <view class="price">价格：{{data.price}}</view>
11 <view>留言条数：{{datas.count}}</view>
12 </view>
13 </view>
14 <!-- 留言板部分 -->
15 <view class="message">
16 <text class="text">留言板</text>
17 <form catchsubmit="formSubmit">
18 <input class="weui-input" auto-focus placeholder="请输入评价" name="message" />
19 <button formType="submit" size="mini" class="butten">留言</button>
20 </form>
21 </view>
22 <block wx:for="{{datas}}" wx:key="key">
23 <view class="liuyan">{{item.message}}</view>
24 </block>
25 </view>
js代码部分
1 Page({
2
3 /**
4 * 页面的初始数据
5 */
6 data: {
7 data: [],
8 datas:[]
9
10 },
11
12 /**
13 * 生命周期函数--监听页面加载
14 */
15 onLoad: function (options) {
16 let gid = options.id
17 //将商品id存入缓存中
18 wx.setStorage({
19 key: "gid",
20 data: gid
21 })
22 console.log(options)
23 wx.request({
24 url: 'http://www.xxxxxx.com/index.php/wxxcx/xxx/one',
25 data: {
26 gid: gid
27 },
28 header: { 'content-type': 'application/json' },
29 method: 'GET',
30 dataType: 'json',
31 responseType: 'text',
32 success: (result) => {
33 if (result.data.code == 200) {
34 this.setData({
35 data: result.data.data
36 })
37 }
38
39 // console.log(result.data.data)
40
41 },
42 fail: () => { },
43 complete: () => { }
44 });
45
46 // 页面加载出留言
47 wx.request({
48 url: 'http://www.xxxx.com/index.php/wxxcx/xxx/chuliuyan',
49 data: {
50 gid: gid
51 },
52 header: { 'content-type': 'application/json' },
53 method: 'GET',
54 dataType: 'json',
55 responseType: 'text',
56 success: (result) => {
57 if (result.data.code == 200) {
58 this.setData({
59 datas: result.data.data
60 })
61 }
62
63 // console.log(result.data.data)
64
65 },
66 fail: () => { },
67 complete: () => { }
68 });
69
70 },
71
72
73 //保存留言
74 formSubmit(e) {
75 // 获取留言内容
76 let message = e.detail.value.message
77 let that=this
78 //从缓存中获取商品的id
79 wx.getStorage({
80 key: "gid",
81 success(res) {
82 // console.log(e.detail.value.message)
83
84 let gid = res.data
85 //发送请求保存留言
86 wx.request({
87 url: 'http://www.xxx.com/index.php/wxxcx/xxx/liuyan', //接口地址
88 data: {
89 gid:gid,
90 message:message
91 },
92 header: { 'content-type': 'application/json' },
93 method: 'GET',
94 dataType: 'json',
95 responseType: 'text',
96 success: (result) => {
97
98 if(result.data.code==200){
99 that.setData({
100 datas:result.data.data
101 })
102 console.log(result.data.data)
103 }
104
105 },
106 fail: () => { },
107 complete: () => { }
108 });
109
110 }
111 })
112
113 },
114
115
116
117 })
php部分
1 //详情页
2 public function one(){
3 $gid = input('gid');
4 $data = \app\wxxcx\model\xxx::get($gid);
5 if ($data){
6 return json(['code'=>200,'msg'=>'success','data'=>$data]);
7 }else{
8 return json(['code'=>500,'msg'=>'error','data'=>""]);
9 }
10 }
11
12 //页面一加载出留言
13 public function chuliuyan(){
14 $gid=input('gid');
15 $data=liuyan::where('gid',$gid)->select();
16 //统计留言条数
17 $data['count']=liuyan::where('gid',$gid)->count();
18 if ($data){
19 return json(['code'=>200,'msg'=>'success','data'=>$data]);
20 }else{
21 return json(['code'=>500,'msg'=>'error','data'=>""]);
22 }
23 }
24
25
26 //保存留言
27 public function liuyan(){
28 $data['gid']=input('gid');
29 $gid=input('gid');
30 $data['message']= input('message');
31 liuyan::create($data,true)->toArray();
32 $data=liuyan::where('gid',$data['gid'])->select();
33 //统计留言数
34 $data['count']=liuyan::where('gid',$gid)->count();
35 // print_r($datas);
36 if ($data){
37 return json(['code'=>200,'msg'=>'success','data'=>$data]);
38 }else{
39 return json(['code'=>500,'msg'=>'error','data'=>""]);
40 }
41 }
wxss部分（样式）
1 .box{
2 width: 100%;
3 height: 400rpx;
4 background-color: honeydew;
5 display: flex;
6 justify-content: space-around;
7 padding-top: 30rpx;
8
9 }
10 .image{
11 width: 35%;
12 height: 350rpx;
13 background-color: darkorange;
14 }
15 .image image{
16 width: 100%;
17 height: 350rpx;
18 }
19 .text{
20 width: 50%;
21 height: 350rpx;
22 background-color: ghostwhite;
23
24 }
25 .text .top{
26
27 width: 100%;
28 height: 100rpx;
29 line-height: 100rpx;
30 margin-top: 60rpx;
31 }
32 .text .price{
33 width: 100%;
34 height: 100rpx;
35 line-height: 100rpx;
36 color: rgb(240, 33, 43);
37 margin-top: 10rpx;
38 }
39
40 /* 留言板块 */
41 .message{
42 width: 100%;
43 height: 300rpx;
44 background-color: #cccccc;
45 text-align: center;
46
47 }
48 .weui-input{
49 margin-top: 20rpx;
50 margin-left: 5%;
51 width: 90%;
52 height: 100rpx;
53 border: 3rpx solid white;
54 }
55 .butten{
56 margin-top: 20rpx;
57
58 }
59 .liuyan{
60 width: 100%;
61 height: 80rpx;
62 line-height: 80rpx;
63 background-color: white;
64 border: 1rpx solid #eeeeee;
65 }
