


WeChat Mini Program Example: Introduction to the method of building a static page for details page
This article brings you an example of a WeChat mini program: an introduction to the method of building a static page for details. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. Create a new directory
detail under the pages
directory, and create a new page detail
:
in detail .json
First change the text content of the navigation bar title:
{ "navigationBarTitleText": "DETAIL页面" }
detail.wxml
<!--pages/detail/detail.wxml--><view class='detailContainer'> <image class='headImg' src='/images/detail/carousel/1.jpg'></image> <view class='avatar_date'> <image src='/images/avatar/0.png'></image> <text>美国队长</text> <text>发布于</text> <text>2018 06 12</text> </view> <text class='company'>火影村</text> <view class='collection_share_container'> <view class='collection_share'> <image src='/images/icon/collection-anti.png'></image> <image src='/images/icon/share-anti.png'></image> </view> <view class='line'></view> </view> <button>转发此文章</button> <text class='content'>火咖啡馆就是了疯狂关键时刻来得及公司领导看过就发上来的考试管理的风格就是的离开几个老师</text></view>
detail.wxss
/* pages/detail/detail.wxss */ .detailContainer { display: flex; flex-direction: column; } .headImg{ width:100%; height:460rpx; } .avatar_date{ padding: 10rpx; } .avatar_date image{ width: 64rpx; height: 64rpx; vertical-align: middle; } .avatar_date text{ font-size: 32rpx; margin-left: 10rpx; } .company{ font-size: 38rpx; font-weight: bold; margin-left: 10rpx; } .collection_share_container{ position: relative; } .collection_share{ float: right; margin-right: 50rpx; } .collection_share image{ width: 90rpx; height: 90rpx; margin-right: 20rpx; } .line{ width: 90%; height: 2rpx; background: rgb(226, 19, 19); top: 45rpx; left: 5%; position: absolute; z-index: -1; } button{ width: 280rpx; height: 80rpx; } .content{ font-size: 32rpx; text-indent: 64rpx; margin: 50rpx 0; }
The renderings are as follows:
Related recommendations:
Detailed explanation of WeChat mini program case: Page construction
WeChat Mini Program Development-Creating a Welcome Page
The above is the detailed content of WeChat Mini Program Example: Introduction to the method of building a static page for details page. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Dreamweaver Mac version
Visual web development tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Atom editor mac version download
The most popular open source editor

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
