【代码】⼩程序简单⼀个页⾯，⽹上图⽚展⽰
//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-        -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;
-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 .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); //wxml
<view class="listWrap" data-c_e_id="wx_view848f9f58">
<view class="listitem01" data-c_e_id="wx_viewcdacad14">
<view class="wx-view_pOFBSt" data-c_e_id="wx_viewbe7a81e9"/>
</view>
</view>
<view bindtap="tap_de01fdb6" class="listitemWrap" data-c_e_id="wx_view687aaf2e">
<view class="image_thumbView" data-c_e_id="wx_view1ae8f9cf">
<navigator class="image_thumbView" data-c_e_id="wx_navigatora2558f19" hover-class="navigator-hover" url="../detail/detail">
<image class="image_thumb" data-c_e_id="wx_image7450ae92" mode="aspectFit" src="atby/materials/origin/640e31829b8776967d        </navigator>
</view>
<text class="text_description" data-c_e_id="wx_text354d27cc">⼩巧可爱的案头雅物。</text>
<view class="listitemInfoWrap" data-c_e_id="wx_view309b339d">
<view class="likeinfo" data-c_e_id="wx_viewcc4e89cb">
<icon class="wx-icon_tijX5I" data-c_e_id="wx_icon_f4dede3d" size="23" type="success"/>
</view>
<text class="listitem_creattime" data-c_e_id="wx_text8c8804b3">2016.10.29</text>
</view>
</view>
<textarea class="c-block c-fullwidth wx-textarea_V5MakO" data-c_e_id="wx_textarea_5ef219ef" name="textarea1" placeholder="This is a textarea" type="textarea <navigator class="wx-navigator_jGU05L" data-c_e_id="wx_navigator_dce6bec8" hover-class="navigator-hover" open-type="redirect"/>
<button class="wx-button_Y3PDck" data-c_e_id="wx_button_408d3dd3" hover-class="button-hover" size="default" type="default">
Next
</button>
// js
// 引⼊coolsite360交互配置设定
require('fig.js');
// 获取全局应⽤程序实例对象
var app = getApp();
// 创建页⾯实例对象
Page({
/**
* 页⾯名称
*/
name: "index",
/**
* 页⾯的初始数据
*/
data: {
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad() {
// 注册coolsite360交互模块
},
/
**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady() {
onReady() {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow() {
// 执⾏coolsite360交互组件展⽰
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide() {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload() {
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作  */
onPullDownRefresh() {
},
//以下为⾃定义点击事件
tap_de01fdb6: function (e) {
//触发coolsite360交互事件
},
})
/
/json
{
"navigationBarTitleText":
"拿捏图⽚"
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。