其实小程序weui 对文章页面的UI个人感觉不怎么样，还是感觉很简陋，如果做文章页面UI的话，建议搭配其它组件，美化一下，首先咱们还是先看案例。
一、在pages目录中新建目录article以及文件article.wxml，并添加如下代码
<view class="page"> <view class="page__hd"> <view class="page__title">Article</view> <view class="page__desc">文章(V型知识库原创 www.vxzsk.com)</view> </view> <view class="page__bd"> <view class="weui-article"> <view class="weui-article__h1">大标题</view> <view class="weui-article__section"> <view class="weui-article__title">章标题</view> <view class="weui-article__section"> <view class="weui-article__h3">1.1 节标题</view> <view class="weui-article__p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </view> <view class="weui-article__p"> <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" /> <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" /> </view> </view> <view class="weui-article__section"> <view class="weui-article__h3">1.2 节标题</view> <view class="weui-article__p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </view> </view> </view> </view> </view> </view>
如上述代码20、21行，引用了背景图片，故在pages目录下的images下放一个背景图片，例如：
二、在根目录app.json配置文件中配置article文件路径，保存后会自动生成对应的js等文件
"pages/article/article",
三、在pages/article/article.wxss文件中添加css样式代码
page{
background-color: #FFFFFF;
}
image{
margin: 4px 0;
}这文章页面的样式太简单了
四、预览效果
是不是感觉页面效果很简陋？
此文章本站原创，地址 https://www.vxzsk.com/1893.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程