最近在实现一个手机安卓多图片绑定到页面的功能,那么我们如何基于MUI框架来实现手机安卓多图片绑定的功能的?下面我们来实现一下。
数据库图片路径:
从数据库把图片路径查询出来后传到后台进行循环切割,
Controller层代码:
//获取项目域名
string url = HttpContext.Request.Url.Host;
//获取端口
int port = HttpContext.Request.Url.Port;
string picUrls = "http://" + url + ":" + port;
foreach (Dictionary<string, object> Dic in List)
{
newDic = new Dictionary<string, object>();
string[] sArray = Regex.Split(Dic["Ware_ImgURL"].ToString(), ",,,", RegexOptions.IgnoreCase);
List<Dictionary<string, object>> ImgList = new List<Dictionary<string, object>>();
for (int i = 0; i < sArray.Length; i++)
{
Dictionary<string, object> ImgArray = new Dictionary<string, object>();
ImgArray.Add("ImgURL", picUrls + sArray[i]);
ImgList.Add(ImgArray);
}
newDic.Add("Ware_ImgURL", ImgList);
newDic.Add("PromotionTitle", Dic["PromotionTitle"]);
ListReturen.Add(newDic);
}
JS页面方法绑定:
xccpost1("ApiUtil/SelectStoreAdvertisingByUserID", {"phone":phone}, function(data) {
if(data.result == "200") {
for (var i =0; i < data.data[0].Ware_ImgURL.length;i++) {
$("#head-img3").append(getHtmlNOne(data.data[0].Ware_ImgURL[i].ImgURL));
}
$("#gonggaoID").text(data.data[0].PromotionTitle);
}
else
{
mui.toast(data.message);
}
},function(error){
mui.toast(error);
});
效果截图:
这样你就可以实现基于MUI框架的多图片绑定功能了,是不是很简单呢。