首页 > 代码库 > Thinkphp微信项目总结1——前端（I）

Thinkphp微信项目总结1——前端（I）

2024-09-28 17:34:39   216人阅读

【微信端】
1.标签的拼装，来实现列表相间的背景颜色

 

css
.cellbg_odd {
             background-color: #B07AAD
         }
.cellbg_even {
             background-color: #D5B4D2
         }

html

<div class="weui_cells weui_cells_access <if condition=‘$k%2 eq 0‘>cellbg_odd</if><if condition=‘$k%2 eq 1‘>cellbg_even</if>">
2.级联关系

 

html 
<div class="weui_panel">
        <div class="weui_panel_bd">
            <div class="weui_media_box weui_media_small_appmsg">
                <div class="weui_cells weui_cells_access">
                    <a href="javascript:;" class="weui_cell"  onclick="selectmenu(‘1‘);">
                        <div class="weui_cell_hd"><i class="icon icon-104 f20"></i></div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <p style="color:#ca0da9;font-weight: bold">*****</p>
                        </div>
                        <span id="cell_1" class="icon icon-74 f-black"></span>
                    </a>
                </div>
            </div>
        </div>
            <div  style="display: none;" id="menu_1">
             <div class="weui_info">联系人： **</div>
             <div class="weui_info">联系电话：     ****-********</div>
      </div>
      </div>

js

function selectmenu(n){
         var eleMore = document.getElementById("menu_"+n);
         if(eleMore.style.display=="none"){
             eleMore.style.display = ‘block‘;
             $("#cell_"+n).removeClass("icon-74");
             $("#cell_"+n).addClass("icon-35 ");
         }else{
             eleMore.style.display = ‘none‘;
             $("#cell_"+n).removeClass("icon-35");
             $("#cell_"+n).addClass("icon-74");
         }
    }
3.单选（保证id的唯一）

 

html 
<volist name=‘opt‘ id="vo" key="k">
                 <div class="page" style="-webkit-overflow-scrolling: touch;">
                      <div class="page__inner" style="position: relative; height:auto;">
                          <div id="question">
                               <div class="title">第 {yc:$k} 题(单选) </div>
                               <p id="content">{yc:$vo.content} </p>
                               <input type="hidden" id="correct_opt_{yc:$k}" value="{yc:$vo.correct}" />
                          </div>
                          <!--内容开始-->
                          <div class="weui_cells weui_cells_radio" style=‘margin-top:5px;background:transparent;‘>
                               <volist name="options_opt" id="options">

                                   <if condition="$options[‘q_id‘] eq $vo[‘id‘]">
                                       <label class="weui_cell weui_check_label" id="lable" for="x{yc:$i}">
                    <div id="choiceall">
                        <p id="select">{yc:$options.optNum}. {yc:$options.content}</p>
                    </div>
                    <div class="weui_cell_ft">
                        <input type="radio" class="weui_check" name="radio{yc:$k}" id="x{yc:$i}" value="{yc:$options.optNum}">
                        <span class="weui_icon_checked"></span>
                    </div>
                </label>
                                   </if>
                               </volist>
                          </div>
                          <div id="button">
                               <div id="pre_next" style="margin-right:80px">
                                   <a id="pre" name="prevbtn" class="prevbtn">上一题</a>
                               </div>
                               <div id="pre_next">
                                   <button id="next" name="nextbtn" class="nextbtn" onclick="_onclick_opt({yc:$k})" style="background-color:transparent;border:0px">下一题</button>
                               </div>
                          </div>
                      </div>
                      <!--内容结束-->

                 </div>
             </volist>

js

function _onclick_opt(i) {
                 answer_opt[i - 1] = $("input[name=‘radio" + i + "‘]:checked").val();
                 correct_opt[i - 1] = $("#correct_opt_" + i).val();

             }
4.多选
html 
<volist name=‘multi‘ id="vo" key="k">
                <div class="page" style="-webkit-overflow-scrolling: touch;">
                    <div class="page__inner" style="position: relative; height:auto;">
                        <div id="questionF">
                            <div class="title">第{yc:$k +5}题(多选)</div>
                            <p id="contentF">{yc:$vo.content}</p>
                            <input type="hidden" id="correct_multi_{yc:$k +5}" value="http://www.mamicode.com/{yc:$vo.correct}" />
                        </div>

                        <!--内容开始-->
                        <div class="weui_cells weui_cells_radio" style=‘margin-top:5px;background:transparent;‘>
                            <volist name="options_multi" id="options">

                                <if condition="$options[‘q_id‘] eq $vo[‘id‘]">
                                    <label class="weui_cell weui_check_label" id="lable" for="s{yc:$i}">
                    <div id="choiceall">
                        <p id="select">{yc:$options.optNum}. {yc:$options.content}</p>
                    </div>
                    <div class="weui_cell_ft">
                        <input type="checkbox" class="weui_check" name="checkbox{yc:$k +5}" id="s{yc:$i}" value="http://www.mamicode.com/{yc:$options.optNum}">
                        <span class="weui_icon_checked"></span>
                    </div>
                </label>
                                </if>
                            </volist>
                        </div>
                        <div id="button">
                            <div id="pre_next" style="margin-right:80px">
                                <a id="pre" name="prevbtn" class="prevbtn">上一题</a>
                            </div>
                            <div id="pre_next">
                                <button id="next" name="nextbtn" class="nextbtn" onclick="_onclick_multi({yc:$k +5})" style="background-color:transparent;border:0px">下一题</button>
                            </div>
                        </div>
                    </div>
                    <!--内容结束-->

                </div>
            </volist>

js

function _onclick_multi(i) {
                 var temp = [];
                 $("input[name=‘checkbox" + i + "‘]:checked").each(function() {
                      temp.push($(this).val());
                 });
                 answer_opt[i - 1] = temp;
                 correct_opt[i - 1] = $("#correct_multi_" + i).val();
                 
             }

 

 

Thinkphp微信项目总结1——前端（I）


联系
我们