【代码】微信小程序 简单一个页面，网上图片展示
//wxss/* 基础样式 */
view,scroll-view,swiper,swiper-item,icon,text,progress,button,checkbox-group,checkbox,form,input,label,picker,radio-group,radio,slider,switch,action-sheet,action-sheet-item,action-sheet-cancel,modal,toast,loading,navigator,audio,image,video,map,canvas {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
page {
height: 100%;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
checkbox-group,
radio-group{
display:block;
}
:before,
:after ,
::before,
::after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.c-minheight {
min-height: 80px;
}
.c-full {
width: 100%;
height: 100%;
}
.c-block {
display: block;
}
.c-autosize {
width: auto;
height: auto;
}
.c-fullwidth {
width: 100%;
}
.c-fullheight {
height: 100%;
}
.c-initHide{
opacity:0 !important;
}
.c-ellipse{
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow:hidden;
}
/* 自定义样式 */
.listitemWrap{padding: 15px 56.25rpx;}
.image_thumbView{width: 637.5rpx; height: 637.5rpx; display: flex; justify-content: center; align-items: center; margin-bottom: 15px;}
.image_thumb{width: 100%; height: 100%; background-color: transparent; }
.text_description{display: block; font-size: 13px; color: rgb(122, 122, 122); text-align: justify; line-height: 1.7em; margin-bottom: 10px;}
.listitemInfoWrap{padding-bottom: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom-color: rgb(237, 237, 237); border-bottom-width: 1px; border-bottom-style: solid; }
.likeinfo{display: flex; width: 80px; justify-content: space-between; align-items: center; }
.likebtn{width: 28px; height: 28px; background-color: transparent; }
.likeinfo_count{font-size: 12px; color: rgb(148, 148, 148); padding: 3px 10px; background-color: rgb(240, 240, 240); border-radius: 4px; }
.listitem_creattime{font-size: 12px; color: rgb(186, 186, 186); padding-right: 2px; }
.wx-text_hDebWU{margin-bottom: 15px; text-align: center; padding-bottom: 8px; display: block; border-bottom: 1px solid rgb(237, 237, 237); margin-top: 15px; }
.listitem01{background-color: rgb(255, 255, 255); margin-bottom: 37.5rpx; }
.listitem-navigator2{display: flex; align-items: flex-start; flex-direction: row; justify-content: flex-start; padding: 37.5rpx;}
.wx-image_tBcdCT2{width: 80px; height: 80px; }
.wx-view_cPj0ok2{margin-left: 10px; flex: 1 1 0%; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.wx-text_TvHPc92{font-size: 16px; -webkit-line-clamp: 2; }
.wx-text_LS2Jup2{font-size: 13px; color: #a1a1a1; }
.wx-view_adF7Mw{display: flex; justify-content: space-between; padding: 18.75rpx; padding-right: 18.75rpx; }
.wx-view_2gazUr{display: flex; padding-left: 18.75rpx; }
.wx-view_DKe6UT{display: flex; justify-content: space-between; align-items: center; min-width: 40px; margin-right: 15px; }
.wx-image_6E2A1o{width: 16px; height: 16px; margin-right: 10px; }
.wx-text_id0VJj{font-size: 12px; color: #8c8c8c; }
.wx-text_9Wn0Di{font-size: 12px; color: rgb(156, 156, 156); padding-right: 18.75rpx; }
.listitem-navigator{display: flex; align-items: flex-start; flex-direction: row; justify-content: flex-start; padding: 37.5rpx; border-bottom: 1px solid rgb(237, 237, 237); border-bottom-color: rgba(237,237,237,1); }
//wxml
小巧可爱的案头雅物。
2016.10.29
// js
// 引入coolsite360交互配置设定
require('coolsite.config.js');
// 获取全局应用程序实例对象
var app = getApp();
// 创建页面实例对象
Page({
/**
* 页面名称
*/
name: "index",
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
// 注册coolsite360交互模块
app.coolsite360.register(this);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 执行coolsite360交互组件展示
app.coolsite360.onShow(this);
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
//以下为自定义点击事件
tap_de01fdb6: function (e) {
//触发coolsite360交互事件
app.coolsite360.fireEvent(e, this);
},
})
//json
{
"navigationBarTitleText":
"拿捏图片"
}