鸡汤来咯开发学习笔记-21

前端 · 2024-07-13

1.避免主包过大,在把self的功能选项页面,放在分包里面,建立分包pages_self的页面文件夹

2.在pages_self里面创建soup文件夹,里面创建文件页面edit.vue但不创建路由在pages.json里面,也无自己的目录。

3.在pages.json里面创立分包(主包同级创建),并写好分包里面的页面路由

"subPackages": [
        {
            "root": "pages_self",  
            "pages": [
                {
                    "path": "soup/edit", //注意写好分包页面路径路由
                    "style": {
                       "navigationBarTitleText": "编辑"
                    }
                }
            ]
        }
    ],

4.选项设置跳转页面<navigator url="/pages_self/soup/edit" class="item">

5.布局edit的页面

<view class="editLayout">
        <view class="row">
            <view class="head">
                <view class="title">主标题</view>
                <text class="subTitle">副标题文本</text>
            </view>
            <view class="body">
                <radio-group @change="radioChange">  //选项组件
                    <label>
                        <radio value="0">毒鸡汤</radio>
                    </label>
                    <label>
                        <radio value="1">心灵鸡汤</radio>
                    </label>
                </radio-group>
            </view>
        </view>
        <view class="row">
            <view class="head">
                <view class="title">主标题</view>
                <text class="subTitle">
                    1.一行不超过12个字,最多五行\n
                    2.心灵鸡汤和毒鸡汤有感而发就行\n
                    3.提交管理员审核可能微调

                </text>
            </view>
            <view class="body">
                   <textarea placeholder="编写你的鸡汤吧"></textarea>
            </view>
        </view>
        <view class="row">
            <view class="head">
                <view class="title">主标题</view>
                <text class="subTitle">
                    1.一行不超过12个字,最多五行\n
                    2.心灵鸡汤和毒鸡汤有感而发就行\n
                    3.提交管理员审核可能微调
        
                </text>
            </view>
            <view class="body">
                   <input type="text" placeholder="如:红楼梦"/>  //placeholder提示文字
            </view>
        </view>
        <view class="row">
        
            <view class="body">
                   <button>提交审核</button>
            </view>
        </view>
    </view>
Theme Jasmine by Kent Liao